Bootstrap table 服务器端分页示例

function initTable(){
$('#test-table').bootstrapTable({
method: 'get',
toolbar: '#toolbar', //工具按钮用哪个容器
striped: true, //是否显示行间隔色
cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
pagination: true, //是否显示分页（*）
sortable: false, //是否启用排序
sortOrder: "asc", //排序方式
pageNumber:1, //初始化加载第一页，默认第一页
pageSize: 10, //每页的记录行数（*）
pageList: [10, 25, 50, 100], //可供选择的每页的行数（*）
url: "${request.contextPath}/fdnRegTbl/listByPage",//这个接口需要处理bootstrap table传递的固定参数
queryParamsType:'', //默认值为 'limit' ,在默认情况下传给服务端的参数为：offset,limit,sort
// 设置为 '' 在这种情况下传给服务器的参数为：pageSize,pageNumber

queryParams: queryParams,//前端调用服务时，会默认传递上边提到的参数，如果需要添加自定义参数，可以自定义一个函数返回请求参数
sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*）
//search: true, //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
strictSearch: true,
//showColumns: true, //是否显示所有的列
//showRefresh: true, //是否显示刷新按钮
minimumCountColumns: 2, //最少允许的列数
clickToSelect: true, //是否启用点击选中行
searchOnEnterKey: true,
columns: [{
field: 'id',
title: 'id',
align: 'center'
}, {
field: 'testkey',
title: '测试标识',
align: 'center'
}, {
field: 'testname',
title: '测试名字',
align: 'center'
},{
field: 'id',
title: '操作',
align: 'center',
formatter:function(value,row,index){
//通过formatter可以自定义列显示的内容
//value：当前field的值，即id
//row：当前行的数据
var a = '<a href="" >测试</a>';
}
}],
pagination:true
});
}

//请求服务数据时所传参数
function queryParams(params){
    return{
        //每页多少条数据
        pageSize: params.pageSize,
        //请求第几页
        pageNumber:params.pageNumber,

	//自定义的参数
        module:$('#module').val(),
        tblName:$('#tblName').val()
    }
}

@RequestMapping(value="/listByPage",method = {RequestMethod.GET,RequestMethod.POST})
   @ResponseBody
   public JSONObject listByPage(@RequestBody Map<String, String> param) throws Exception{
      JSONObject jsonObject = new JSONObject();
      Page page = new Page();
      page.setPageSize(Integer.valueOf(param.get("pageSize")));
      page.setCurrentPage(Integer.valueOf(param.get("pageNumber")));
      Page pageData = getService().selectPage(XXX, page);
      jsonObject.put("rows",pageData.getResult());
      jsonObject.put("total",pageData.getTotalCount());
      return jsonObject;
   }

几点注意

1、queryParamsType默认值为'limit'，不设置就是默认值。所以必须设置，可以是queryParamsType:''

2、根据queryParamsType值的不同，设置分页参数属性。queryParamsType的类型必须和分页参数名称匹配，否则取不到值

Bootstrap table 服务器端分页示例

猜你喜欢