bootstrapTable后端分页
2017-11-16 18:48
477 查看
bootstrapTable由于后端分页文档并不够详细,自己折腾老好一会才做出实例出来,现记录下来。
略过简单部分,只说在配置项里面的必须部分。
queryParams为传递给后台的查询参数,官方的说明文档有误,实测不需「pageSize, pageNumber, searchText, sortName, sortOrder」或「limit, offset, search, sort, order」等参数的传递;
responseHandler为得到服务端传递的数据,之后要给boostrapTable进行数据加载,要包含2个属性total,rows,实际使用参见以上实例
略过简单部分,只说在配置项里面的必须部分。
$("#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,实际使用参见以上实例
相关文章推荐
- bootStrap-table前后端分页
- spring data jpa bootstrap table 后端分页(详解)
- Bootstrap-table学习笔记(二)——前后端分页模糊查询
- bootstrap-table前后端分页方式
- BootStrap-Table 分页
- bootstrap table 服务器端分页--ashx+ajax
- BootStrap-table 客户端分页和服务端分页的区别
- bootstrap table插件的分页与checkbox使用详解
- bootstrap-table后台分页时前台删除最后一页所有数据refresh刷新后无数据问题。
- Bootstrap Table插件且是server端分页的问题
- bootstrap-table关闭无限分页后点击上一页下一页bug修复
- SSH和BootStrap-table分页
- [前端插件]Bootstrap Table服务器分页与在线编辑应用总结
- bootstrap-table数据循环以及分页
- bootstrap-table分页问题
- bootstraptable 分页查询 及 条件查询
- BootStrap table 数据填充与分页应用总结
- bootstrap-table表格客户端分页实例
- bootstrap table分页采用server方式,分页查询