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

代码:

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. createFile

    #include<iostream> #include<windows.h> #include<stdio.h> using namespace std; int ...

  2. 基于VS快速排序的单元测试

    1.选择开发工具 1.1由于Visual stdio 已经安装,所以运行界面如下图所示: 2.进行单元测试 2.1用Visual stdio 2017创建一个新项目(快速排序)如下图所示: 其中程序如 ...

  3. 使用IntelliJ IDEA 前最好修改的配置

    目录 1.下载 2.破解 3.修改配置 下载 详见我的另外一篇博客:<软件开发资源下载>中的[IDE]->[IntelliJ IDEA] 破解 详见我的另外一篇博客:<最新版I ...

  4. c++ 用 0x3f3f3f3f 设定最大int值的优点

    在许多算法中都要用到一个常量来表示最大值,例如:寻找一个最小数,就要先设定一个值a,如果比a小,a就等于这个数:再如,最短路径中基本的松弛操作: 0 在c++中可以用memset() 来初始化数组成最 ...

  5. P3648 [APIO2014]序列分割

    传送门 首先容易证明,得分和切的顺序没有关系 所以直接默认先切左边再切右边就好了 然后显然可以 $dp$ 一开始想的是设 $f[i][j]$ 表示切了 $i$ 次,此次把 $j$ 和 $j+1$ 分开 ...

  6. ZOJ - 2112 主席树套树状数组

    题意:动态第k大,可单点更新,操作+原数组范围6e4 年轻人的第一道纯手工树套树 静态第k大可以很轻易的用权值主席树作差而得 而动态第k大由于修改第i个数会影响[i...n]棵树,因此我们不能在原主席 ...

  7. 剑指offer——链表

    #include"stdio.h" #include"stdlib.h" #include"iostream" using namespac ...

  8. Github提交PullRequest

    Github提交PullRequest工作流程: 以Kubernetes为例 1.   Fork Kubernetes到自己的Github目录 访问:https://github.com/kubern ...

  9. springboot整合mybatis(映射文件方式和注解方式)

    springboot作为一个微服务框架,给我们开发人员提供极大的便利,秉着约定大于配置的原则,通过starter包的形式为我们做了许多默认的配置,在进行数据持久化到关系型数据库时,我们一般都会首选sp ...

  10. selenium+python(模块化驱动测试)

    模块化驱动测试,就是借鉴编程语言中模块化的思想,把重复的操作独立成功公告模块,懂用例执行过程中需要用到这一模块操作时则被调用,这样可以极大的消除重复从而提高测试用例的可维护性 下面具体以126邮箱为例 ...