zoukankan      html  css  js  c++  java
  • easyui grid 本地做分页

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

    代码:

    dataSource 为 grid 里的数据源

    html部分:

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

      

    js部分:

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

      {
        field: 'FeeCategoryName', title: '费用类型', 100, align: 'center'
      },
      {
        field: 'FeeCategoryDescription', title: '费用描述', 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
        });
      }
    });

      

  • 相关阅读:
    Linux 之 文件压缩解压
    Linux 之 文件搜索命令
    Linux 之 文件内容查看
    Linux 之 Vim常用命令
    Linux 之 CentOS练习
    CentOS找不到想要的镜像版本?
    Swoole 简单学习(2)
    Swoole 简单学习
    svn的简单知识
    8、16、32-BIT系列单片机区别与特点
  • 原文地址:https://www.cnblogs.com/yigexiaojiangshi/p/9634050.html
Copyright © 2011-2022 走看看