最近要交接项目,在庆幸的是在这个时间节点到来之际发现了一个关于服务器分页的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
};
},