easyui grid 本地做分页

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

代码:

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
    });
  }
});

  

posted @ 2018-09-12 12:01  小僵尸  阅读(593)  评论(0编辑  收藏  举报