easyui grid 本地做分页

最新推荐文章于 2021-07-29 15:09:06 发布

weixin_30745553

最新推荐文章于 2021-07-29 15:09:06 发布

阅读量138

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/yigexiaojiangshi/p/9634050.html

版权

背景：有的数据不是很多，但是有分页的需求，这个时候后台往往没有做分页，我们是一次请求了所有的数据。

代码：

dataSource 为 grid 里的数据源

html部分：

<table id="costtype"></table>

js部分：

//费用类型 grid
$('#costtype').datagrid({
　　data: dataSource.slice(0,1),//每页展示的条数
　　columns: [[
　　{
　　　　field: 'rowNumbers', title: '序号', width: 30, formatter: function (value, row, index) {
　　　　　　var op = $applyList.datagrid('options');
　　　　　　return op.pageSize * (op.pageNumber - 1) + (index + 1);
　　　　}
　　},

　　{
　　　　field: 'FeeCategoryName', title: '费用类型', width: 100, align: 'center'
　　},
　　{
　　　　field: 'FeeCategoryDescription', title: '费用描述', width: 300, align: 'center'

　　　　}
　　]],
　　rownumbers: true,
　　pagination: true//设置分页
});
var pager = $('#costtype').datagrid("getPager");
pager.pagination({
　　total: dataSource.length,//数据源总条数
　　pageList: [1],
　　beforePageText: '第',//页数文本框前显示的汉字
　　afterPageText: '页共 {pages} 页',
　　displayMsg: '当前显示 {from} - {to} 条记录共 {total} 条记录',
　　onSelectPage: function (pageNo, pageSize) {
　　　　var start = (pageNo - 1) * pageSize;
　　　　var end = start + pageSize;
　　　　$('#costtype').datagrid("loadData", dataSource.slice(start, end));
　　　　pager.pagination('refresh', {
　　　　　　total: dataSource.length,
　　　　　　pageNumber: pageNo
　　　　});
　　}
});