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=" 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,
446,
height:200,
pageList: [4, 10, 15, 20],
pageSize:4
}).datagrid('loadData', getData());
});
</script>
</body>
</html>
就这么爽分页成功