手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >jQuery EasyUI datagrid实现本地分页的方法
jQuery EasyUI datagrid实现本地分页的方法
摘要:本文实例讲述了jQueryEasyUIdatagrid实现本地分页的方法。分享给大家供大家参考。具体如下:一般分页都是后台做,前端做无论从哪...

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

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

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

【jQuery EasyUI datagrid实现本地分页的方法】相关文章:

jQuery结合ajax实现动态加载文本内容

JQuery+CSS实现图片上放置按钮的方法

javascript实现dom动态创建省市纵向列表菜单的方法

JQuery中DOM实现事件移除的方法

Jquery动态添加输入框的方法

jQuery实现仿腾讯微博滑出效果报告每日天气的方法

jQuery实现延迟跳转的方法

javascript实现控制的多级下拉菜单

jQuery+ajax实现无刷新级联菜单示例

Javascript实现广告页面的定时关闭

精品推荐
分类导航