jQuery EasyUI datagrid實(shí)現(xiàn)本地分頁(yè)的方法
更新時(shí)間：2015年02月13日 09:21:30 作者：筆心
這篇文章主要介紹了jQuery EasyUI datagrid實(shí)現(xiàn)本地分頁(yè)的方法,以實(shí)例形式較為詳細(xì)的分析了本地分頁(yè)的原理與相關(guān)的實(shí)現(xiàn)技巧,需要的朋友可以參考下
本文實(shí)例講述了jQuery EasyUI datagrid實(shí)現(xiàn)本地分頁(yè)的方法。分享給大家供大家參考。具體如下：
一般分頁(yè)都是后臺(tái)做，前端做無(wú)論從哪方面考慮都不合適。但是有的時(shí)候還是有這種需求。
這里重點(diǎn)用到了pagination的監(jiān)聽(tīng)，以及JS數(shù)組的slice方法來(lái)完成。代碼如下：
<!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:"測(cè)試本地分頁(yè)",
rownumbers:true,
fitColumns:true,
pagination:true,
data:data.slice(0,10),
columns:[
[
{field:'id', align:"center", title:"編號(hào)",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>
運(yùn)行效果如下圖所示：
希望本文所述對(duì)大家的jQuery程序設(shè)計(jì)有所幫助。
相關(guān)文章
jquery Easyui Datagrid實(shí)現(xiàn)批量操作（編輯，刪除，添加）
本篇文章主要介紹了jquery Easyui Datagrid實(shí)現(xiàn)批量操作（編輯，刪除，添加），小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-02-02
jquery常用技巧及常用方法列表集合，學(xué)習(xí)jquery的朋友可以收藏下。方便查找學(xué)習(xí)。2011-04-04
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)影院選座訂座效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-04-04
cnblogs TagCloud基于jquery的實(shí)現(xiàn)代碼
自創(chuàng)"山寨版"的"博客園"TagCloud!...2010-06-06
jQuery實(shí)現(xiàn)的鼠標(biāo)經(jīng)過(guò)時(shí)變寬的效果(附demo源碼)
這篇文章主要介紹了jQuery實(shí)現(xiàn)的鼠標(biāo)經(jīng)過(guò)時(shí)變寬的效果,實(shí)例演示了jQuery的Kwicks插件實(shí)現(xiàn)針對(duì)鼠標(biāo)事件的響應(yīng)與頁(yè)面元素樣式動(dòng)態(tài)變換的相關(guān)技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2016-04-04
jQuery 是一個(gè)非常優(yōu)秀的 JavaScript 框架，在現(xiàn)在的 Web 開(kāi)發(fā)項(xiàng)目中扮演著重要角色。jQuery 使用簡(jiǎn)單靈活，同時(shí)還有許多成熟的插件可供選擇，它可以幫助你在項(xiàng)目中加入一些非常好的效果，讓網(wǎng)站有更好的可用性和用戶(hù)體驗(yàn)2011-10-10
jQuery實(shí)現(xiàn)Table表格隔行變色及高亮顯示當(dāng)前選擇行效果示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)Table表格隔行變色及高亮顯示當(dāng)前選擇行效果,涉及jQuery針對(duì)table元素遍歷、運(yùn)算、樣式及鼠標(biāo)事件動(dòng)態(tài)響應(yīng)相關(guān)操作技巧,需要的朋友可以參考下2017-02-02
jQuery EasyUI 開(kāi)源插件套裝 完全替代ExtJS
JQuery愛(ài)好者們的福音 jQuery EasyUI 開(kāi)源插件套裝 完全替代ExtJS(引用)2010-03-03
jquery將json轉(zhuǎn)為數(shù)據(jù)字典的實(shí)例代碼
這篇文章主要介紹了jquery將json轉(zhuǎn)為數(shù)據(jù)字典的實(shí)例代碼，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-10-10
下面小編就為大家?guī)?lái)一篇json定義及jquery操作json的方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-09-09