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

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程序设计有所帮助。