bootstraptable插件中服务器端分页小结

最近要交接项目,在庆幸的是在这个时间节点到来之际发现了一个关于服务器分页的bug,由于这个项目多处用到服务器端分页,所以要好好的捋一捋啊,啊哈哈哈哈。

首先,关于服务器端分页前台要传到后台的值必须含有 pageNumber和size,这些参数,通过bootstraptable中的queryParams参数进行传递,同时要设置queryParamsType,一般的默认值时“limit”

不知道为什么有时候这样无法获取size的值,所以,针对bootstraptable.js插件进行了一些修改,修改方法,见网站:https://www.jianshu.com/p/8ab488a8d259           

在一点,对于后台返回来的值,必须要包含两点,一个是total(表示后台数据库中总共有多少条数据),在一个是rows(表示请求回来的要展示在表格中的数据)

bootstraptable服务器端分页对于后台返回来的数据无法直接加载使用,所以他一般会需要 responseHandler参数进行数据处理。

对于dataField:"data",一项,他必须要和后台对接好,后台规定是什么,引号里就填什么

 contentType:"application/x-www-form-urlencoded",:我查资料的时候,看见过这行的解释,现在翻不着了,以后遇见了再补。

其他的要说的点暂时没有了,下面是我写的这个项目涉及到分页的一些代码

 url: urlList, //请求后台的URL(*)
         method: 'get', //请求方式(*)
         contentType:"application/x-www-form-urlencoded",
         toolbar: '#toolbar_ziChan ', //工具按钮用哪个容器
         striped: true, //是否显示行间隔色
         cache: false, //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)
         pagination: true, //是否显示分页(*)
         queryParamsType:'limit',//查询参数组织方式
         queryParams: function(params) {
             page=params.pageNumber-1;
             size=params.limit;
             return {
               size: params.limit, // 每页条数
               page: params.pageNumber-1, // 当前页
             };
           }, //传递参数(*)
         dataField:"data",
         sortable: true, //是否启用排序
         sortOrder: "desc", //排序方式
         showExport: true,  //是否显示导出按钮
         buttonsAlign:"right",  //按钮位置
         exportTypes:['excel'],  //导出文件类型
         exportDataType: "selected",              //basic', 'all', 'selected'.
         Icons:'glyphicon-export',
         sidePagination: "server", //分页方式:client客户端分页,server服务端分页(*)
         pageNumber: 1, //初始化加载第一页,默认第一页
         pageSize: 10, //每页的记录行数(*)
         pageList: [5, 10, 15, 20], //可供选择的每页的行数(*)
         search: false, //是否显示表格搜索,此搜索是客户端搜索,不会进服务端,所以,个人感觉意义不大
         strictSearch: true,
         showColumns: false, //是否显示所有的列
         showRefresh: true, //是否显示刷新按钮
         minimumCountColumns: 2, //最少允许的列数
         clickToSelect: true, //是否启用点击选中行
         //height: 500, //行高,如果没有设置height属性,表格自动根据记录条数觉得表格高度
         // uniqueId: "collateralNum", //每一行的唯一标识,一般为主键列
         showToggle: true, //是否显示详细视图和列表视图的切换按钮
         cardView: false, //是否显示详细视图
         detailView: false, //是否显示父子表
         responseHandler:function (res) {
             console.log(res)
             var  data=res.data;
             var  deviceNumber=data.total;
             $("#deviceNumber").text(deviceNumber);
             var  devices=data.devices;
             console.log(devices);
             return {
                 total:data.total,
                 data:devices
             };
         },

猜你喜欢

转载自blog.csdn.net/wanghui_0924/article/details/82909157