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

发布时间：2020-12-14 23:13:22 所属栏目：资源来源：网络整理

导读：本篇章节讲解jQuery EasyUI datagrid实现本地分页的方法。供大家参考研究。具体如下：一般分页都是后台做，前端做无论从哪方面考虑都不合适。但是有的时候还是有这种需求。这里重点用到了pagination的监听，以及JS数组的slice方法来完成。代码如下

本篇章节讲解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',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程序设计有所帮助。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!