//分页布局定义。该属性自版本 1.3.5 起可用。
//布局项目包括一个或多个下列值：
//1、list：页面尺寸列表。
//2、sep：页面按钮分割。
//3、first：第一个按钮。
//4、prev：前一个按钮。
//5、next：后一个按钮。
//6、last：最后一个按钮。
//7、efresh：刷新按钮。
//8、manual：允许输入域页码的手动页码输入框。
//9、links：页码链接。
layout : ['list','sep','first','prev','links','next','last','efresh','manual'],
<script type="text/javascript">
// 表格数据源
var data = []; // 用代码造30条数据
for(var i = 1; i < 200; ++i) {
data.push({
"id": i,
"name": "张三旺旺" + i
})
}
$(function() {
$("#dd").datagrid({
title: "测试本地分页",
rownumbers: true,
fitColumns: true,
pagination: true,
data: data.slice(0, 10),
columns: [
[ {
field: 'id',
align: "center",
title: "编号",
100
}, {
field: 'name',
align: "center",
title: "姓名",
100
} ]
]
});
var pager = $("#dd").datagrid("getPager");
pager.pagination({
layout : ['first','prev','links','next','last'],
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>
<body>
<div id="dd"></div>
</body>
效果图
学习网站
http://www.jeasyui.net/plugins/155.html