版权声明：欢迎转载 https://blog.csdn.net/feinifi/article/details/84257337
easyui给出的分页组件，需要结合datagrid，pagination，数据展现使用datagrid，分页展现使用的是pagination，两者必须混合使用，才能展现一个分页列表，如下图所示：
默认的分页列表实现如下：
<table class="easyui-datagrid" id="datagrid" style="width:100%;" data-options="url:'getdata.json',
method:'get',pagination:true,fitcolumns:true,scrollbarSize:0">
<thead>
<th data-options="field:'id',align:'center',width:'20%'">ID</th>
<th data-options="field:'name',align:'center',width:'20%'">Name</th>
<th data-options="field:'mobile',align:'center',width:'20%'">Mobile</th>
<th data-options="field:'email',align:'center',width:'20%'">Email</th>
<th data-options="field:'status',align:'center',width:'20%'">Status</th>
</thead>
<tbody>
</tbody>
</table>重点内容在table标签的class="easyui-datagrid"，然后就是data-options="url:'getdata.json',method:'get',pagination:'true',
fitcolumns:true,scrollbarSize:0"，这样一个分页列表就实现了，datagrid默认的分页接口请求是post的，所以这里如果有必要需要设置method:'get'，另外pagination:true是用来设置分页的，fitcolumns:true,scrollbarSize:0解决列表的右侧空白问题。
这样默认的分页解决了，但是这里有一些问题：
第一个，就是如果带着条件查询的，那么这么写就有问题了，url写死了，没有设置条件的地方，
第二个，就是分页底部展示的信息默认是英文的。
为了解决这些问题，就必须手动设置datagrid的数据，以及分页英文显示的问题。
1、ajax获取收据
$.ajax({
url:"getdata.json",
type:"get",
dataType:"json",
success:function(data){
if(data){
$("#datagrid").datagrid("loadData",data);
}
}
});2、设置分页
$("#datagrid").datagrid({
fitcolumns:true,
scrollbarSize:0,
pagination:true,
method:'get'
}).datagrid("getPager").pagination({
displayMsg:"总共{total}条记录",
onSelectPage:function(page,size){
console.log(page,size);
var num = "";
if(page%2==0){
num="-2";
}
$.ajax({
url:"getdata"+num+".json",
type:"get",
dataType:"json",
success:function(data){
if(data){
$("#datagrid").datagrid("loadData",data);
}
}
});
}
});这样，一个完整的分页就解决了，显示中文使用了displayMsg:"总共{total}条记录"。按照条件查询分页时传入参数使用onSelectPage:function(){}解决。这里全部是前端实现的分页，ajax数据也是模拟的后台接口，数据分别如下：
getdata.json
{
"rows":[
{"id":"101","name":"zhangsan1","email":"[email protected]","mobile":"15900909891","status":1},
{"id":"102","name":"zhangsan2","email":"[email protected]","mobile":"15900909892","status":1},
{"id":"103","name":"zhangsan3","email":"[email protected]","mobile":"15900909893","status":1},
{"id":"104","name":"zhangsan4","email":"[email protected]","mobile":"15900909894","status":1},
{"id":"105","name":"zhangsan5","email":"[email protected]","mobile":"15900909895","status":1},
{"id":"106","name":"zhangsan6","email":"[email protected]","mobile":"15900909896","status":1},
{"id":"107","name":"zhangsan7","email":"[email protected]","mobile":"15900909897","status":1},
{"id":"108","name":"zhangsan8","email":"[email protected]","mobile":"15900909898","status":1},
{"id":"109","name":"zhangsan9","email":"[email protected]","mobile":"15900909899","status":1},
{"id":"110","name":"zhangsan10","email":"[email protected]","mobile":"15900909810","status":1}
],
"total":23
}getdata-2.json
{
"rows":[
{"id":"201","name":"lisi1","email":"[email protected]","mobile":"13900909891","status":1},
{"id":"202","name":"lisi2","email":"[email protected]","mobile":"13900909892","status":1},
{"id":"203","name":"lisi3","email":"[email protected]","mobile":"13900909893","status":1},
{"id":"204","name":"lisi4","email":"[email protected]","mobile":"13900909894","status":1},
{"id":"205","name":"lisi5","email":"[email protected]","mobile":"13900909895","status":1},
{"id":"206","name":"lisi6","email":"[email protected]","mobile":"13900909896","status":1},
{"id":"207","name":"lisi7","email":"[email protected]","mobile":"13900909897","status":1},
{"id":"208","name":"lisi8","email":"[email protected]","mobile":"13900909898","status":1},
{"id":"209","name":"lisi9","email":"[email protected]","mobile":"13900909899","status":1},
{"id":"210","name":"lisi10","email":"[email protected]","mobile":"13900909810","status":1}
],
"total":23
}这里为了动态显示分页数据，前端直接采用了两个getdata.json,getdata-2.json数据响应来模拟。
分页效果如下：
datagrid赋值时，$("#datagrid").datagrid("loadData",data) 可以直接赋值一个数组，也可以赋值一个{rows:[],total:23}的json分页对象。这里如果赋值数组，那么分页数据会失效，最好赋值一个json分页对象。
全部代码附上：
<!doctype html>
<html>
<head>
<meta charset="UTF-8"/>
<title>分页列表</title>
<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css"/>
<link rel="stylesheet" type="text/css" href="../themes/icon.css"/>
<link rel="stylesheet" type="text/css" href="../demo/demo.css"/>
<script type="text/javascript" src="../jquery.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
</head>
<body class="easyui-layout">
<div class="easyui-container-fluid">
<div class="easyui-panel">
<form id="ff">
<div style="margin-bottom:20px;padding-top:20px;">
<input name="name" class="easyui-textbox"
data-options="label:'姓名：'"/>
</div>
<div style="margin-bottom:20px;text-align:center">
<a class="easyui-linkbutton c8" href="javascript:void(0);"
onclick="search()">查询</a>
</div>
</form>
</div>
<div class="easyui-panel" style="width:100%;border:none;"
data-options="title:'用户列表'">
<div class="table-wrapper">
<table class="easyui-datagrid" id="datagrid" style="width:100%;">
<thead>
<th data-options="field:'id',align:'center',
width:'20%'">ID</th>
<th data-options="field:'name',align:'center',
width:'20%'">Name</th>
<th data-options="field:'mobile',align:'center',
width:'20%'">Mobile</th>
<th data-options="field:'email',align:'center',
width:'20%'">Email</th>
<th data-options="field:'status',align:'center',
width:'20%'">Status</th>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
<script type="text/javascript">
$(function(){
$("#datagrid").datagrid({
fitcolumns:true,
scrollbarSize:0,
pagination:true,
method:'get'
}).datagrid("getPager").pagination({
displayMsg:"总共{total}条记录",
onSelectPage:function(page,size){
console.log(page,size);
var num = "";
if(page%2==0){
num="-2";
}
$.ajax({
url:"getdata"+num+".json",
type:"get",
dataType:"json",
success:function(data){
if(data){
$("#datagrid").datagrid("loadData",data);
}
}
});
}
});
$.ajax({
url:"getdata.json",
type:"get",
dataType:"json",
success:function(data){
if(data){
$("#datagrid").datagrid("loadData",data);
}
}
});
});
function search(){
//todo pagination search
}
</script>
</body>
</html>