zoukankan      html  css  js  c++  java
  • 关于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;
  • 相关阅读:
    Python全栈day19(函数补充)
    Python全栈day18(三元运算,列表解析,生成器表达式)
    Python全栈day18(迭代器协议和for循环工作机制)
    KVM虚拟化
    Python使用函数实现把字符串转换成整数
    MySQL备份1356错误提示修复办法
    Python全栈day17(文件处理)
    CentOS添加PHP至环境变量
    CentOS7.2编译配置LNMP环境(MySQL5.7.20,PHP7.0.24)
    php查询mysql数据库 查询条件替中文字符串变量时无法查询
  • 原文地址:https://www.cnblogs.com/wangshen31/p/8439931.html
Copyright © 2011-2022 走看看