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

代码:

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

  

easyui grid 本地做分页的更多相关文章

  1. [Ext JS 4] Grid 实战之分页功能

    前言 分页功能的实现有两种途径: 一种是服务端分页方式, 也就是web客户端传递页码参数给服务端,服务端根据页面参数返回指定条数的数据.也就是要多少取多少.这种方式比较适合Grid  的数据量很大,需 ...

  2. schemaeasyui实例:SSh结合Easyui实现Datagrid的分页显示

    查了好多资料,发现还是不全,干脆自己整理吧,最少保证在我的做法正确的,以免误导读者,也是给自己做个记载吧! 克日学习Easyui,发现非常好用,界面很雅观.将学习的心得在此写下,这篇博客写SSh结合E ...

  3. 用PHP+MySQL来做分页的演示

    用php做分页弄懂逻辑关系其实不难,不过我在听课的时候估计是被老师讲的那些变量里的英文单词给听懵了,因为有几个变量的名字都很像,只是换了两三个英文字母而已,有的就少几个这样的,听到一半已经不知道老师讲 ...

  4. SpringMVC结合easyUI中datagird实现分页

    SpringMVC结合easyUI中datagird实现分页 DataGrid以表格形式展示数据,并提供了丰富的选择.排序.分组和编辑数据的功能支持.轻量级,单元格合并.多列标题.冻结列和页脚只是其中 ...

  5. Ajax做分页

    Ajax做分页 用这种ajax做分页的方法比较简单,把代码直接复制就可以,然后根据实际更改一下里面的参数. .设置分页显示显示的样式,显示效果如下. 复制代码 <style type=" ...

  6. SSh结合Easyui实现Datagrid的分页显示

    近日学习Easyui,发现非常好用,界面很美观.将学习的心得在此写下,这篇博客写SSh结合Easyui实现Datagrid的分页显示,其他的例如添加.修改.删除.批量删除等功能将在后面的博客一一写来. ...

  7. LigerUi中的Grid中不分页显示(local)!

    LigerUi中的Grid中不分页显示! grid为local usePager: true,                         //是否分页

  8. 实例:SSh结合Easyui实现Datagrid的分页显示

    近日学习Easyui,发现非常好用,界面很美观.将学习的心得在此写下,这篇博客写SSh结合Easyui实现Datagrid的分页显示,其他的例如添加.修改.删除.批量删除等功能将在后面的博客一一写来. ...

  9. 使用PHP做分页查询(查询结果也显示为分页)

    1.先把数据库里所有的数据分页显示在页面,并在显示数据的表格上方加上查询表单.(加上条件,实现目标结果.) <!DOCTYPE html PUBLIC "-//W3C//DTD XHT ...

随机推荐

  1. stl容器学习——queue,stack,list与string

    目录 头文件 string 目录部分 1.string的定义及初始化 ① 用一个字符串给另一个字符串赋值 ②用字符串常量对字符串进行赋值 ③ 用n个相同的字符对字符串赋值 2.string的运算符及比 ...

  2. 1093 字符串A+B (20 分)

    #include <iostream> using namespace std; int main() { int n; string s1, s2; getline(cin,s1); g ...

  3. 3. Javascript学习笔记——变量、内存、作用域

    3. 变量.内存.作用域 3.1 基本类型和引用类型的值 ECMAScript 变量可能包含两种不同数据类型的值:基本类型值[Undefined.Null.Boolean.Number 和 Strin ...

  4. mybatis中调用游标,存储过程,函数

    在ibatis和Mybatis对存储过程和函数函数的调用的配置Xml是不一样的,以下是针对Mybatis 3.2的环境进行操作的. 第一步配置Mapper的xml内容 <mapper names ...

  5. Ionic3,组件的使用(四)

    说明 因为同样是作为 Ionic3 小白,所以很多东西都是自己摸索出来的,可能有很多不合理的地方,请多多指正. 效果图 细节说明 一:组件.页面均采用 懒加载: 二:页面的头部标题栏,采用了组件化的方 ...

  6. linux curl post/put请求

    案列: -X: 请求方式 --header: 请求header -d: 请求的数据 最后跟上请求的地址 curl -X PUT --header 'Content-Type: application/ ...

  7. 一些学习比较好的网站,及es6学习好网站,前端用的相关库,及知道的插件

    图形可视化:d3js  echarts https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects ...

  8. Linux下MySQL出现乱码的解决方法

    开发环境 cent os 6.5 mysql springboot duird 故障描述 本地开发环境没有任何问题,上传到服务器后发现提交的表单内容只要是中文直接变成 ??? 解决方式 错误尝试: 一 ...

  9. java 实现一套流程管理、流转的思路(伪工作流)

    在做某个管理项目时,被要求实现一套流程管理,比如请假的申请审批流程等,在参考了很多资料,并和同事讨论后,得到了一个自主实现的流程管理. 以下提供我的设计思路,知道了思路,实现起来就简单很多了. 首先我 ...

  10. 存储器的保护(三)——《x86汇编语言:从实模式到保护模式》读书笔记20

    存储器的保护(三) 修改本章代码清单,使之可以检测1MB以上的内存空间(从地址0x0010_0000开始,不考虑高速缓存的影响).要求:对内存的读写按双字的长度进行,并在检测的同时显示已检测的内存数量 ...