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比这方便，但总有老系统还是使用旧的技术