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. ILMerge 简单应用

    ILMerge是合并.net的assembly的工具,最新版的支持.net 4.0的ILmerge下载: http://www.microsoft.com/downloads/details.aspx ...

  2. [资源]PHP使用消息队列

    利用PHP操作Linux消息队列完成进程间通信 基于HTTP协议的轻量级开源简单队列服务:HTTPSQS[原创] Redis队列——PHP操作简单示例 入队操作 <?php $redis = n ...

  3. [iOS翻译]《iOS 7 Programming Cookbook》：iOS文件与文件夹管理（下）

    三. 创建文件夹 问题: 你想创建文件夹到磁盘,存储一些文件到里面 解决方案: 使NSFileManager类的实例方法createDirectoryAtPath:withIntermediateDi ...

  4. 《WCF服务编程第三版》知识点摘录

  5. 自定义progressBar的旋转圆圈

    在手工打造下拉刷新功能 自带的progressBar太丑了 做个也不费事,一个简单的圆形 旋转动画加type是sweep的gradient渐变 <rotate //旋转动画xmlns:andro ...

  6. 实现可以滑动的GrildView，类似美团网首页的GrildView功能菜单

    首先上实现效果图,不会做动态图,就先凑合着看吧 使用了网上的一个开源控件viewpagerindicator,可以自定义切换时候显示的标记,圆点,或者下划线. GrildView显示的是手机上的全部a ...

  7. Linux第七次实验笔记

    #期中总结 习题总结与分析 填空:Linux Bash中,Ctrl+a快捷键的作用是(将光标移至输入行头,相当于Home键). [ctrl]+u 从游标处向前删除指令串 [ctrl]+k 从游标处向后 ...

  8. web.xml配置文件

    一.web.xml里面的标签 <display-name> <context-param> <listener> <filter> 和 <filt ...

  9. DLL函数中内存分配及释放的问题

    DLL函数中内存分配及释放的问题 最近一直在写DLL,遇到了一些比较难缠的问题,不过目前基本都解决了.主要是一些内存分配引起问题,既有大家经常遇到的现象也有特殊的 情况,这里总结一下,做为资料. 错误 ...

  10. 疯狂位图之——位图实现12GB无重复大整数集排序

    <Programming Pearls>(编程珠玑)第一章讲述了如何用位图排序无重复的数据集,整个思想很简洁,今天实践了下. 一.主要思想 位图排序的思想就是在内存中申请一块连续的空间作为 ...