关于bootstrap table的server分页

首先是bootstrap初始化的表格参数：

// 初始化Table
    oTableInit.Init = function() {
            $('#booksTable').bootstrapTable({
            url : '/TestWeb/booksTable', // 请求后台的URL（*）
            method : 'get', // 请求方式（*）
            toolbar : '#toolbar', // 工具按钮用哪个容器
            striped : true, // 是否显示行间隔色
            cache : false, // 是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
            pagination : true, // 是否显示分页（*）
            sortable : false, // 是否启用排序
            sortOrder : "asc", // 排序方式
            queryParams : oTableInit.queryParams,// 传递参数（*）
            sidePagination : "server", // 分页方式：client客户端分页，server服务端分页（*）
            pageNumber : 1, // 初始化加载第一页，默认第一页
            pageSize : 10, // 每页的记录行数（*）
            pageList : [ 10, 25, 50, 100 ], // 可供选择的每页的行数（*）
            search : false, // 是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
            strictSearch : false,
            showColumns : true, // 是否显示所有的列
            showRefresh : true, // 是否显示刷新按钮
            minimumCountColumns : 2, // 最少允许的列数
            clickToSelect : true, // 是否启用点击选中行
            height : 500, // 行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
            uniqueId : "ID", // 每一行的唯一标识，一般为主键列
            showToggle : true, // 是否显示详细视图和列表视图的切换按钮
            cardView : false, // 是否显示详细视图
            detailView : false, // 是否显示父子表
            columns : [ {
                radio : true
            }, {
                field : 'bookName',
                title : '书本名称'
            }, {
                field : 'price',
                title : '书本价格'
            }, {
                field : 'time',
                title : '书本入库时间'
            }, {
                field : 'status',
                title : '是否借出'
            }, ]
        });
    };

然后是前端要传给后端的参数：

oTableInit.queryParams = function(params) {

        /*
        var temp = { //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
            limit : params.limit, //页面大小
            offset : params.offset, //页码
            bookName : $("#txt_search_bookName").val()
        };
         */

        if (!params)
            return {
                bookName : $("#txt_search_bookName").val()
            //bookName : "fuck"
            };
        var temp = { // 这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
            limit : params.limit, // 页面大小
            offset : params.offset, // 页码
            search : params.search,
            bookName : $("#txt_search_bookName").val()
        //bookName : "fuck you"
        };

        return temp;
    };

这里的params是框架的table自动提供的，然后limit是页面大小，就是你一面显示多少行数据，也就是params会把你写的pageSize传过去。

然后这个offset是页码，比如说现在是第一页（limit=10），然后框架帮你传过去的的offset是0也就是从0开始，显示limit个数据，如果是第二页，offset是10，以此类推。

然后是后端的关键代码，server分页关键就是要告诉前端total几行，还有就是一页中的数据rows，rows数据是个json数组，里面每一个数据都是一个表格中行的json对象。看一下关键代码：

public  Map<String,Object> getPageBase(){
        
        int total=list.size();//list是dao层返回的所有数据的一个list
        Map<String,Object> result = new HashMap<String,Object>();
        List<Object> lists = new ArrayList<Object>(); 
        //判断总数是否大于页码的大小，大于则按照正常页码获取显示的数据，否则按照数据计算的页码，获取显示数据
        if(total>offset){
            for(int i=offset;i<total && i<(offset+limit);i++){
                lists.add(list.get(i));//lists是要返回给前端的rows数组
            }
        }else{
            int nums=total/limit;
            for(int i=nums*limit;i<total;i++){
                lists.add(list.get(i));
            }
        }
        result.put("total",total);
        result.put("rows",lists);
        return result;
        
    }

 

 

顺便提一下，如果你传给前端的rows里面的数据有些没有显示出来，你也可以通过row来获取。比如我的id是不显示出来，我仍然可以通过像   getSelections等方法获得row的数据从而获得row.id这样。  类似于：

data.field.id=medicinal.table.bootstrapTable('getSelections')[0].id;