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. transition的局限

    transition的优点在于简单易用,但是它有几个很大的局限. (1)transition需要事件触发,所以没法在网页加载时自动发生. (2)transition是一次性的,不能重复发生,除非一再触 ...

  2. <global-results>怎么用

    <global-results>中的result可以被所有action跳转,所有action都可以跳转到result 所有返回值为“json”的action,都可以跳转到json.jsp

  3. [转]在Ubuntu 下安装Redis 并使用init 脚本启动

    1. 下载安装:   cd /tmp wget http://redis.googlecode.com/files/redis-2.2.4.tar.gz tar -zxf redis-2.2.4.ta ...

  4. 通信vue2.0组件

    vue2.0组件通信各种情况总结与实例分析   Props在vue组件中各种角色总结 在Vue中组件是实现模块化开发的主要内容,而组件的通信更是vue数据驱动的灵魂,现就四种主要情况总结如下: 使用p ...

  5. MVC4验证用户登录特性实现方法

    在开发过程中,需要用户登陆才能访问指定的页面这种功能,微软已经提供了这个特性. // 摘要: // 表示一个特性,该特性用于限制调用方对操作方法的访问. [AttributeUsage(Attribu ...

  6. 分享基于EF+MVC+Bootstrap的通用后台管理系统及架构(转)

    http://www.cnblogs.com/guozili/p/3496265.html 基于EF+MVC+Bootstrap构建通用后台管理系统,集成轻量级的缓存模块.日志模块.上传缩略图模块.通 ...

  7. 【超详细教程】使用Windows Live Writer 2012和Office Word 2013 发布

    去年就知道有这个功能,不过没去深究总结过,最近有写网络博客的欲望了,于是又重新拾起这玩意儿. 具体到底是用Windows Live Writer 2012还是用Word 2013,个人觉得看个人,因为 ...

  8. 在windows下python,pip,numpy,scipy,matplotlib的安装

    系统:win7(64bit) 如果只需要安装python,执行步骤一就可以了,不用管后面.如果还需要其它的库,则只需要执行第二步,第一步可省略(因为在安装anaconda的时间,python就自动装好 ...

  9. 北京联想招聘-Android高级工程师（5-7年） 加入qq 群：220486180 或者直接在此 留言咨询

    Job ID #: 47979 Position Title: 高级Android开发工程师 Location: CHN-Beijing Functional Area: Research/Devel ...

  10. Linux常用的基本命令

    man命令:查看帮助信息                       格式:man  需要查看的命令 date命令:显示时间                            格式:# date ...