bootstrapTable使用場景及方式

場景一：混合開發，適用jsp、php前端不足  純html結構

<div>
	<table id="table"
		data-toggle="table"
		data-url="http://guessulike.config.58v5.cn/gulrecomserviceweb/gulrecall/getscene"
		data-pagination="true"  
		data-search="true"
		data-show-columns="true"
		data-show-refresh="true"
		data-show-toggle="true"
		data-page-number="1"
		data-page-size="15"
		data-sort-name="create_time"
		data-sort-order="desc"
		data-page-list="[10, 25, 50, 100, All]"
		data-click-to-select="true"
		data-single-select="true"
		data-toolbar="#toolbar">
		<thead>
			<tr>
				<th data-field="state" data-checkbox="true"></th>
				<th data-field="scene_name" data-switchable="true">推薦位名稱</th>
				<th data-field="scene" data-switchable="true">場景</th>
				<th data-field="creater" data-switchable="true">創建者</th>
				<th data-field="create_time" data-sortable="true" data-switchable="true">創建時間</th>
				<th data-field="managers" data-switchable="true">授權賬號</th>
			</tr>
		</thead>
	</table>
</div>

　　

 

場景二：混合開發或前后端未完全分離，前端人員不足或不成體系，按照bootstrapTable返回響應固定結構

{

　　rows:[],

　　total:100,

}

 $("#"+this.table).bootstrapTable({
            url:'../data/bootstrap-table.json',
            method:'get',//使用get方式請求服務器獲取數據
            queryParamsType : "",
            dataField:"data",
            queryParams:params=>{
                this.param=this.getFormJson(this.formId)
                this.param["pageSize"] = params.pageSize;
                this.param["pageNumber"] = params.pageNumber
                this.param['order'] = params.order;
                this.param['limit'] = params.limit;
                return this.param ;
            },
            onLoadSuccess: function(){  //加載成功時執行

            },
            onLoadError: function(){  //加載失敗時執行

            },
            sidePagination : "server",
            fixedColumns: true,
            fixedNumber: 0,
            height:getHeight()
        });

　　

場景三：前后端完全分離狀態，自定義響應結構體系，前端封裝公共js庫、ajax請求

        
function ajaxRequest(params){
            //封裝ajax 十里;
            $apis.users.getlist(function(re){
                var message = rs.array;
                    
                      params.success({ //注意，必須返回參數 params
                        total: rs.total,
                        rows: res.list
                    });
            })
            
        }

 $("#"+this.table).bootstrapTable({
            ajax:ajaxRequest,
            onLoadSuccess: function(){  //加載成功時執行

            },
            onLoadError: function(){  //加載失敗時執行

            },
            sidePagination : "server",
            fixedColumns: true,
            fixedNumber: 0,
            height:getHeight()
        });

 

簡單事例、、雖說vue elementUI比這方便，但總有老系統還是使用舊的技術