http://www.codeweblog.com/jquery-easyui-datagrid%e5%ae%9e%e7%8e%b0%e6%9c%ac%e5%9c%b0%e5%88%86%e9%a1%b5%e7%9a%84%e6%96%b9%e6%b3%95/

这篇文章主要介绍了jQuery EasyUI datagrid实现本地分页的方法,以实例形式较为详细的分析了本地分页的原理与相关的实现技巧,需要的朋友可以参考下

本文实例讲述了jQuery EasyUI datagrid实现本地分页的方法。分享给大家供大家参考。具体如下：

一般分页都是后台做，前端做无论从哪方面考虑都不合适。但是有的时候还是有这种需求。

这里重点用到了pagination的监听，以及JS数组的slice方法来完成。代码如下：

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8"/>

  <title></title>

  <link href="js/jquery-easyui-1.3.6/themes/default/easyui.css" rel="stylesheet"/>

  <link href="js/jquery-easyui-1.3.6/themes/icon.css" rel="stylesheet"/>

  <script type="text/javascript" src="js/jquery-easyui-1.3.6/jquery.min.js"></script>

  <script type="text/javascript" src="js/jquery-easyui-1.3.6/jquery.easyui.min.js"></script>

  <script type="text/javascript">

    // 表格数据源

    var data = [];

    // 用代码造30条数据

    for (var i = 1; i < 31; ++i) {

      data.push({

        "id":i,

        "name":"Student" + i

      })

    }

    $(function () {

      $("#dd").datagrid({

        title:"测试本地分页",

        rownumbers:true,

        fitColumns:true,

        pagination:true,

        data:data.slice(0,10),

        columns:[

          [

            {field:'id', align:"center", title:"编号",width:100},

            {field:'name', align:"center", title:"姓名",width:100}

          ]

        ]

      });

      var pager = $("#dd").datagrid("getPager");

      pager.pagination({

        total:data.length,

        onSelectPage:function (pageNo, pageSize) {

          var start = (pageNo - 1) * pageSize;

          var end = start + pageSize;

          $("#dd").datagrid("loadData", data.slice(start, end));

          pager.pagination('refresh', {

            total:data.length,

            pageNumber:pageNo

          });

        }

      });

    });

  </script>

</head>

<body>

<div id="dd"></div>

</body>

</html>

运行效果如下图所示：

希望本文所述对大家的jQuery程序设计有所帮助。

jQuery EasyUI datagrid实现本地分页的方法的更多相关文章

  1. Jquery easyUI datagrid载入复杂JSON数据方法

    1.JSON数据为: {     "total":28, "rows": [     {       "itemNo": "1&q ...

  2. jQuery easyui datagrid pagenation 的分页数据格式

    {"total":28,"rows":[    {"productid":"FI-SW-01","unitco ...

  3. 【转】 jquery easyui datagrid使用，分页、排序、查询

    $('#dg').datagrid({ url: "xxx.ashx",                    pagination: true,                p ...

  4. jquery easyui datagrid使用参考

    jquery easyui datagrid使用参考   创建datagrid 在页面上添加一个div或table标签,然后用jquery获取这个标签,并初始化一个datagrid.代码如下: 页面上 ...

  5. 扩展jquery easyui datagrid编辑单元格

    扩展jquery easyui datagrid编辑单元格 1.随便聊聊 这段时间由于工作上的业务需求,对jquery easyui比较感兴趣,根据比较浅薄的js知识,对jquery easyui中的 ...

  6. jQuery EasyUI DataGrid Checkbox 数据设定与取值

    纯粹做个记录,以免日后忘记该怎么设定. 这一篇将会说明两种使用 jQuery EasyUI DataGrid 的 Checkbox 设定方式,以及在既有数据下将 checked 为 true 的该笔数 ...

  7. Jquery easyui datagrid 导出Excel

    From:http://www.cnblogs.com/weiqt/articles/4022399.html datagrid的扩展方法,用于将当前的数据生成excel需要的内容. 1 <sc ...

  8. 雷林鹏分享：jQuery EasyUI 数据网格 - 自定义分页

    jQuery EasyUI 数据网格 - 自定义分页 数据网格(datagrid)内置一个很好特性的分页功能,自定义也相当简单.在本教程中,我们将创建一个数据网格(datagrid),并在分页工具栏上 ...

  9. 雷林鹏分享：jQuery EasyUI 数据网格 - 添加分页组件

    jQuery EasyUI 数据网格 - 添加分页组件 本实例演示如何从服务器端加载数据,如何添加分页组件(pagination)到数据网格(datagrid). 创建数据网格(DataGrid) 为 ...

随机推荐

  1. jQuery Ajax 操作函数及deferred对象

    jQuery Ajax 操作函数 jQuery 库拥有完整的 Ajax 兼容套件.其中的函数和方法允许我们在不刷新浏览器的情况下从服务器加载数据. 函数 描述 jQuery.ajax() 执行异步 H ...

  2. Netty指定分隔的字符

    package org.zln.netty.five.part02; import io.netty.buffer.ByteBuf; import io.netty.buffer.Unpooled; ...

  3. 使用js使某个按钮在5秒内不能重复点击

    <head> <!--参考:http://illy.iteye.com/blog/1534276 --> <!-- http://y.dobit.top/Detail/1 ...

  4. web前端性能意义、关注重点、测试方案、优化技巧

    1.前段性能的意义 对于访问一个网站,最花费时间的并不是后端应用程序处理以及数据库等消耗的时间,而是前端花费的时间(包括请求.网络传输.页面加载.渲染等).根据web优化的黄金法则: 80%的最终用户 ...

  5. JS 之性能优化(1)

    了解JS性能优化是学习前端必备的一项技能.下面就简单的列出几点: 1.注意作用域,避免全局查找. 访问全局变量比访问局部变量慢,是因为需要遍历作用域链,查找作用域链需要额外的时间.所以在一个函数中,将 ...

  6. android json解析及简单例子

    JSON的定义: 一种轻量级的数据交换格式,具有良好的可读和便于快速编写的特性.业内主流技术为其提供了完整的解决方案(有点类似于正则表达式 ,获得了当今大部分语言的支持),从而可以在不同平台间进行数据 ...

  7. Arduino小车学习与研究博客

    Arduino小车学习与研究博客 信安系统设计基础实践模块 Arduino小车学习与研究 ================== 陈都(20135328) 余佳源(20135321) 莫凡(201352 ...

  8. 学习笔记——Maven pom.xml配置详解

    POM的全称是“ProjectObjectModel(项目对象模型)”. pom.xml详解 声明规范 <projectxmlns="http://maven.apache.org/P ...

  9. SQL 语句大全

    转载:http://www.cnblogs.com/yubinfeng/archive/2010/11/02/1867386.html 经典SQL语句大全 一.基础 1.说明:创建数据库 CREATE ...

  10. storm如何保证at least once语义？

    背景 前期收到的问题: 1.在Topology中我们可以指定spout.bolt的并行度,在提交Topology时Storm如何将spout.bolt自动发布到每个服务器并且控制服务的CPU.磁盘等资 ...