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. f2fs解析（三）NAT中如何区分inode和其他dnode

    首先,我们要知道NAT中的每个表项都对应着MAIN AREA区域中NODE段的一个block,还要知道NODE block很特别,block末尾会有一个node footer结构: 243 struc ...

  2. c# 调用打印机

    1.本地打印机 //添加引用并using System.Management; public static void AvailablePrinters() { ManagementScope ms ...

  3. 给vps设置ssh供爬墙使用

    在服务器上建一个 username : 添加用户:useradd -s /bin/false username,将用户的shell设置成/bin/false.这样用户就无法与系统进行交互. 设置密码: ...

  4. Socket Programming in C#--Server Side

    Server Side If you have understood whatever I have described so far, you will easily understand the ...

  5. [QoS]cisco3560限速配置案例-收集于网工泡泡

    网络中常用到这些:CISCO和H3C-MAC过滤+端口限速+端口镜像+端口隔离 不同的方式不同的思想:嘎嘎 其他各个厂商的限速链接:http://pan.baidu.com/s/1hrIMoSG 密码 ...

  6. PHP基础13：数组排序

    <?php //1.对数组进行升序排序 - sort() $cars=array("VOLVO","BMW","BYD"); $fri ...

  7. Java系列：JVM指令详解（上）（zz）

    一.未归类系列A 此系列暂未归类. 指令码    助记符                            说明    59:iastore    60:lload 6       //因为str ...

  8. 《深入理解计算机系统》深入实践之——vim深入研究

    vim 用户手册中,大部分的例子都是在讲 vim 如何高效编写代码,由此可见,vim 是一款面向于程序员的多功能编辑器,即使某些功能 vim 无法直接完成,借助其丰富的插件资源,必定可以达成目标,这就 ...

  9. nth-child() 选择器

    给tabel tb1 td添加样式 #tb1 tr td:nth-child(2n+1) {/*奇数行样式*/ } #tb1 tr td:nth-child(2n) {/*偶数行样式*/ }

  10. [BZOJ 2241][SDOI2011]打地鼠（枚举+预处理）

    题目:http://www.lydsy.com:808/JudgeOnline/problem.php?id=2241 分析: 鉴于R,C的取值很小,于是可以人为枚举R和C的大小,然后判定这个规格的锤 ...