编程 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 相关文章推荐

用YUI做了个标签浏览效果

Feb 20 Javascript

Javascript 模式实例观察者模式

Oct 24 Javascript

javascript解决innerText浏览器兼容问题思路代码

May 17 Javascript

Jquery getJSON方法详细分析

Dec 26 Javascript

jquery实现在网页指定区域显示自定义右键菜单效果

Aug 25 Javascript

js点击返回跳转到指定页面实现过程

Aug 20 Javascript

无循环 JavaScript(map、reduce、filter和find)

Apr 08 Javascript

web前端vue实现插值文本和输出原始html

Jan 19 Javascript

web3.js增加eth.getRawTransactionByHash(txhash)方法步骤

Mar 15 Javascript

Intellij IDEA搭建vue-cli项目的方法步骤

Oct 20 Javascript

Vue实现将数据库中带html标签的内容输出(原始HTML(Raw HTML))

Oct 28 Javascript

js实现贪吃蛇游戏 canvas绘制地图

Sep 09 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