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

代码:

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. 2016级算法第三次上机-G.Winter is coming

    904 Winter is coming 思路 难题.首先简化问题, \(n\) 个0与 \(m\) 个1排成一列,连续的0不能超过x个,连续的1不能超过y个,求排列方法数. 显然会想到这是动态规划. ...

  2. weex 自定义Component

    扩展iOS的功能 ~  Component 与UI控件相关 ,即通过原生方法创建UI界面,返回给weex 使用 一. 新建 WXComponent 的子类     在子类实现WXComponent 的 ...

  3. IIS服务器环境下某路径下所有PHP接口无法运行报500.19错误

    IIS服务器环境下某路径(文件夹)下所有PHP接口无法运行报500.19错误 环境:IIS8.5 + php7.2.1 错误描述:某目录下(如 d:\web\A)所有php接口文档运行错误,接口测试工 ...

  4. python __getattribute__、__getattr__、__setattr__详解

    __getattribute__ 官方文档中描述如下: 该方法可以拦截对对象属性的所有访问企图,当属性被访问时,自动调用该方法(只适用于新式类).因此常用于实现一些访问某属性时执行一段代码的特性. 需 ...

  5. Jenkins添加maven插件

    1.1.1 安装Maven插件 我们要使用Jenkins+Maven对Java项目进行构建,需要安装Maven Project Plugin,具体安装过程请参考插件管理部分 1.1.2 3.Linux ...

  6. springMVC的一些入门配置

    1.springMVC的描述 1.1.SpringMVC是Spring框架内置的MVC的实现.SpringMVC就是一个Spring内置的MVC子框架. 1.2.SpringMVC的作用是实现页面和后 ...

  7. SpringCloud---消息驱动的微服务---Spring Cloud Stream

    1.概述 1.1 Spring Cloud Stream:用来   为微服务应用   构建   消息驱动能力的框架: 可基于SpringBoot来创建独立.可用于生产的Spring应用程序: 使用Sp ...

  8. Ubuntu 18.04 安装 odoo12 源码版

    更新和升级 在我们进入安装过程之前,你应该更新和升级Ubuntu.打开终端窗口,发出以下命令: sudo apt-get updatesudo apt-get upgrade 注意:如果内核升级,则必 ...

  9. mac 下安装 mit-scheme

    这两天心血来潮想看一下 SICP 和 Lisp,准备先看 SICP ,之后再学 Haskell, 深入学习一下函数式编程. 所以得装个 mit-scheme 做练习. 尝试了 3 种方式, 前 2 种 ...

  10. Unity GL画折线

    新建一个脚本,这个物体得挂在有摄像机组件的物体上才能生效 OnPostRender() 这个函数才会被自动调用(类似生命周期自动调用) 然后就可以代码画线了,原理是openGL的画线 using Un ...