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. [原]iBatis.Net（C#）系列一：简介及运行环境

    转载请注明http://www.cnblogs.com/13590/archive/2013/02/27/2934580.html 摘要:介绍iBatis.Net的基本情况和运行原理,运行环境中各参数 ...

  2. Qt——信号槽连接：基于字符串与基于函数的连接之间的不同

    从Qt5.0开始,Qt提供了两种不同的方式进行信号槽的连接:基于 字符串 的连接语法.基于 函数 的连接语法.这两种语法各有利弊,下面对它们的不同点进行总结. 以下几部分详细解释了它们之间的不同,并说 ...

  3. 在opencv3中进行图片人脸检测

    在opencv中,人脸检测用的是harr或LBP特征,分类算法用的是adaboost算法.这种算法需要提前训练大量的图片,非常耗时,因此opencv已经训练好了,把训练结果存放在一些xml文件里面.在 ...

  4. Random()方法的使用

    import java.util.*;public class RandomTest { public static void main(String[] args) {  double i = Ma ...

  5. 20135208 第一次JAVA实验报告

    课程:Java程序设计          班级: 1352 姓名:贺邦                学号:20135208 成绩:             指导教师:娄嘉鹏       实验日期:2 ...

  6. 直接修改托管堆栈中的type object pointer（类型对象指针）

    都知道.NET是一个强对象类型的框架. 那么对于对象类型又是怎么确定的呢. 最初的我简单认为数据的类型就是定义时字段的类型修饰决定的(回来发现这种观点是绝对错误的) 我们知道引用对象存储在托管堆栈中, ...

  7. Python3常用内置函数

    数学相关 abs(a) : 求取绝对值.abs(-1) max(list) : 求取list最大值.max([1,2,3]) min(list) : 求取list最小值.min([1,2,3]) su ...

  8. 『随笔』WCF开发那些需要注意的坑

    执行如下 批处理:"C:\Program Files\Microsoft SDKs\Windows\v6.0A\Bin\svcutil.exe" http://127.0.0.1: ...

  9. activity动画主题使用注意事项

    当我们不满足于系统默认的activity动画交互方式,我们可以通过在主题里面,指定activity动画样式来实现自定义交互效果. 在style里面定义样式 <!-- Base applicati ...

  10. css3动画 bug 2点

    1. .myanimate{ transition-property: left;transition-duration: .3s;transition-timing-function: ease } ...