您的位置:首页 > Web前端 > BootStrap

bootstrapTable后端分页

2017-11-16 18:48 477 查看
bootstrapTable由于后端分页文档并不够详细,自己折腾老好一会才做出实例出来,现记录下来。

略过简单部分,只说在配置项里面的必须部分。
$("#queryTab").bootstrapTable("destroy").bootstrapTable({
height: TABLE_HEIGHT,
method: 'POST',
search: true,//是否设置搜索框
pagination: true,//是否设置分页
sidePagination: 'server',//服务端分页的条件
pageSize: 20,//每页条数
pageNumber: 1,//当前页
pageList: 'ALL',//如果设置了分页,选择页面的数据条数[5, 10, 15, 20],ALL为显示全部
// paginationLoop: false,//是否设置翻页循环,默认循环
contentType: "application/json; charset=UTF-8",
dataType: "json",
url: info.url,
/**传递给后台的查询信息
* bootstrapTable默认行为会把查询参数转为表单数据,故需要stringify()转换一次
* @param params 效果等同于this
* @returns {*} 查询参数,包含当前页和查询关键字
*/
queryParams: function (params) {
return JSON.stringify({
//计算当前页(offset:如第21到40条,20即为offset,limit为每页数据条数)
pageNum: (params.offset / params.limit) + 1,
product_name: info.data.product_name
});
},
/**查询后返回的数据在加载前的处理
*
* @param result 查询后服务器返回的结果
* @returns {{total: int, rows: Array}} 返回数据为包含total和rows的2个属性
*/
responseHandler: function (result) {
if (result.head && result.head.actionCode) {
var data = result.body;
return {
total: data.allPages * this.pageSize,   //总共的条目数量
rows: data.processArray //当前页需要显示的数据
};
} else {
return {
total: 0,
rows: []
}
}
},
onLoadSuccess: function () {

},
onLoadError: function () {
console.log('error')
},
formatShowingRows: function (pageFrom, pageTo, totalRows) {
return '第 ' + pageFrom + ' 条到 ' + pageTo + '条 ,共 ' + totalRows + ' 条'
},
columns: columns

});


queryParams为传递给后台的查询参数,官方的说明文档有误,实测不需「pageSize, pageNumber, searchText, sortName, sortOrder」或「limit, offset, search, sort, order」等参数的传递;
responseHandler为得到服务端传递的数据,之后要给boostrapTable进行数据加载,要包含2个属性total,rows,实际使用参见以上实例
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: