jQuery EasyUI datagrid实现本地分页的方法
本文实例讲述了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程序设计有所帮助。
相关推荐
83540198 2014-10-06
JeWangZhe 2013-04-08
89427412 2020-02-13
morexyoung 2019-12-20
EdwardSiCong 2015-04-11
ningwentao 2015-10-21
zderam的私人 2019-09-02
shanhuijava 2016-08-17
wndong 2016-03-04
AngelicaA 2015-12-22
xiaobozhu 2015-10-27
yypiao 2015-10-21
小策一喋 2015-09-17
小仙儿 2015-06-15
huzai 2015-06-03
huzai 2015-04-22
zhangmingming 2015-03-11