jQuery EasyUI datagrid實現(xiàn)本地分頁的方法
更新時間:2015年02月13日 09:21:30 作者:筆心
這篇文章主要介紹了jQuery EasyUI datagrid實現(xiàn)本地分頁的方法,以實例形式較為詳細(xì)的分析了本地分頁的原理與相關(guān)的實現(xiàn)技巧,需要的朋友可以參考下
本文實例講述了jQuery EasyUI datagrid實現(xiàn)本地分頁的方法。分享給大家供大家參考。具體如下:
一般分頁都是后臺做,前端做無論從哪方面考慮都不合適。但是有的時候還是有這種需求。
這里重點用到了pagination的監(jiān)聽,以及JS數(shù)組的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"> // 表格數(shù)據(jù)源 var data = []; // 用代碼造30條數(shù)據(jù) 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程序設(shè)計有所幫助。
相關(guān)文章
jQuery中setTimeout的幾種使用方法小結(jié)
jQuery 中 setTimeout/setInterval 不能像在原生態(tài) javascript 中那樣使用, 否則會報錯.2013-04-04jQuery源碼分析之jQuery中的循環(huán)技巧詳解
這篇文章主要介紹了jQuery源碼中的循環(huán)技巧,包括各類選擇、判斷、遍歷等等操作,非常實用的技巧,需要的朋友可以參考下2014-09-09jQuery實現(xiàn)可用于博客的動態(tài)滑動菜單完整實例
這篇文章主要介紹了jQuery實現(xiàn)可用于博客的動態(tài)滑動菜單代碼,可實現(xiàn)jQuery基于鼠標(biāo)事件動態(tài)操作頁面元素變換的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-09-09