1.写好json 数据
{
"total":21,
"rows":[
{"code":"001","name":"Name zhangsanfeng","addr":"莆田
11","wang":"xiao"},
{"code":"002","name":"Name 2","addr":"Address
13","wang":"xiao"},
{"code":"003","name":"Name 3","addr":"Address
87","wang":"xiao"},
{"code":"004","name":"Name 4","addr":"Address
63","wang":"xiao"},
{"code":"005","name":"Name 5","addr":"Address
45","wang":"xiao"},
{"code":"006","name":"Name 6","addr":"Address
16","wang":"xiao"},
{"code":"007","name":"Name 7","addr":"Address
27","wang":"xiao"},
{"code":"008","name":"Name 8","addr":"Address
81","wang":"xiao"},
{"code":"009","name":"Name 9","addr":"Address
69","wang":"xiao"},
{"code":"010","name":"Name 10","addr":"Address 78","wang":"xiao"},
{"code":"011","name":"Name 1","addr":"Address
11","wang":"xiao"},
{"code":"012","name":"Name 2","addr":"Address
13","wang":"xiao"},
{"code":"013","name":"Name 3","addr":"Address
87","wang":"xiao"},
{"code":"014","name":"Name 4","addr":"Address
63","wang":"xiao"},
{"code":"015","name":"Name 5","addr":"Address
45","wang":"xiao"},
{"code":"016","name":"Name 6","addr":"Address
16","wang":"xiao"},
{"code":"017","name":"Name 7","addr":"Address
27","wang":"xiao"},
{"code":"018","name":"Name 8","addr":"Address
81","wang":"xiao"},
{"code":"019","name":"Name 9","addr":"Address
69","wang":"xiao"},
{"code":"020","name":"Name 10","addr":"Address
78","wang":"xiao"},
{"code":"021","name":"Name 10","addr":"Address
78","wang":"xiao"},
{"code":"022","name":"Name 10","addr":"Address
78","wang":"xiao"},
{"code":"023","name":"Name 10","addr":"Address
78","wang":"xiao"}
,{"code":"024","name":"Name 10","addr":"Address
78","wang":"xiao"}
,{"code":"025","name":"Name 10","addr":"Address
78","wang":"xiao"}
,{"code":"026","name":"Name 10","addr":"Address
78","wang":"xiao"}
,{"code":"027","name":"Name 10","addr":"Address
78","wang":"xiao"}
]
}
2. html 页面代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Client
Side Pagination - jQuery EasyUI Demo</title>
<style type="text/css">
#dg
{
border-color:red;
}
</style>
<link
href="../themes/icon.css" rel="stylesheet" />
<link
href="../themes/default/easyui.css" rel="stylesheet" />
<link href="../src/demo.css" rel="stylesheet" />
<script
src="../comjs/jquery-1.8.0.min.js"></script>
<script
src="../comjs/jquery.easyui.min.js"></script>
</head>
<body>
<h2>Client Side Pagination</h2>
<div
class="demo-info">
<div
class="demo-tip icon-tip"></div>
<div>This sample shows how to implement client side pagination in
DataGrid.</div>
</div>
<div style="margin:10px 0;"></div>
<table id="dg" title="Client Side Pagination"
style=" width:700px;height:300px" data-options="
rownumbers:true,
singleSelect:true,
autoRowHeight:false,
pagination:true,
pageSize:10">
<thead>
<tr>
<th field="code" width="80">code
No</th>
<th field="name"
width="100">name</th>
<th field="addr"
width="80">addr</th>
<th field="wang" width="80"
align="right">Amount</th>
</tr>
</thead>
</table>
<script>
var jilu;
var
rows = [];
function getData()
{
//ajax
kai
$.ajax({
url:
‘../datagrid_data.aspx‘,
type:
"get",
async:
false,
dataType: "json",
data:
‘id=‘ + Math.random(),
success: function (json) {
jilu = json;
for (var i = 0; i < json.rows.length; i++) {
rows.push({ "code": json.rows[i].code, "name": json.rows[i].name, "addr":
json.rows[i].addr, "wang": json.rows[i].wang });
}
},
error:
function (xhr, status, errorThrown) {
alert("errorThrown=" + errorThrown);
}
})
return rows;
}
function
pagerFilter1(data) {
if (typeof data.length ==
‘number‘ && typeof data.splice == ‘function‘) { // is
array
data =
{
total: data.length,
rows: data
}
}
var dg =
$(this);
var opts =
dg.datagrid(‘options‘);
var pager =
dg.datagrid(‘getPager‘);
pager.pagination({//1
onSelectPage: function (pageNum, pageSize) {//2
opts.pageNumber = pageNum;
opts.pageSize = pageSize;
pager.pagination(‘refresh‘, {//3
pageNumber: pageNum,
pageSize: pageSize
});//3
dg.datagrid(‘loadData‘, data);
},
pageList:[4,10,15,20]//2
});//1
if (!data.originalRows)
{
data.originalRows = (data.rows);
}
var start = (opts.pageNumber -
1) * parseInt(opts.pageSize);
var end = start +
parseInt(opts.pageSize);
data.rows =
(data.originalRows.slice(start, end));
return data;
}
$(function () {
$(‘#dg‘).css(‘text-align‘,‘center‘);
$(‘#dg‘).datagrid({
loadFilter: pagerFilter1,
width:
446,
height:200,
pageList: [4, 10, 15,
20],
pageSize:4
}).datagrid(‘loadData‘, getData());
});
</script>
</body>
</html>
就这么爽分页成功
easyui datagrid 分页,布布扣,bubuko.com
原文：http://www.cnblogs.com/kexb/p/3682491.html