编程 Javascript

jQuery EasyUI datagrid实现本地分页的方法

Posted in Javascript onFebruary 13, 2015

本文实例讲述了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 EasyUI datagrid实现本地分页的方法

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

jQuery EasyUI datagrid实现本地分页的方法

- Author -

笔心

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

js中更短的 Array 类型转换

Oct 30 Javascript

基于jquery完美拖拽，可返回拖动轨迹

Mar 29 Javascript

jQuery实现的简单分页示例

Jun 01 Javascript

jQuery实现最简单实用的分秒倒计时

Feb 05 Javascript

完美实现js选项卡切换效果(一)

Mar 08 Javascript

Bootstrap实现的标签页内容切换显示效果示例

May 25 Javascript

JavaScript实现微信号随机切换代码

Mar 09 Javascript

Vue2 轮播图slide组件实例代码

May 31 Javascript

VUE 配置vue-devtools调试工具及安装方法

Sep 30 Javascript

详解Angular模板引用变量及其作用域

Nov 23 Javascript

js实现移动端tab切换时下划线滑动效果

Sep 08 Javascript

解决vue+router路由跳转不起作用的一项原因

Jul 19 Javascript

jQuery向后台传入json格式数据的方法

Feb 13 #Javascript

浅谈轻量级js模板引擎simplite

Feb 13 #Javascript

js实现拖拽效果

Feb 12 #Javascript

jQuery多个input求和的实现方法

Feb 12 #Javascript

JQuery实现防止退格键返回的方法

Feb 12 #Javascript

JavaScript自定义数组排序方法

Feb 12 #Javascript

zepto.js中tap事件阻止冒泡的实现方法

Feb 12 #Javascript