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":"zhangsan@126.com","mobile":"15900909891","status":1},
{"id":"102","name":"zhangsan2","email":"zhangsan@126.com","mobile":"15900909892","status":1},
{"id":"103","name":"zhangsan3","email":"zhangsan@126.com","mobile":"15900909893","status":1},
{"id":"104","name":"zhangsan4","email":"zhangsan@126.com","mobile":"15900909894","status":1},
{"id":"105","name":"zhangsan5","email":"zhangsan@126.com","mobile":"15900909895","status":1},
{"id":"106","name":"zhangsan6","email":"zhangsan@126.com","mobile":"15900909896","status":1},
{"id":"107","name":"zhangsan7","email":"zhangsan@126.com","mobile":"15900909897","status":1},
{"id":"108","name":"zhangsan8","email":"zhangsan@126.com","mobile":"15900909898","status":1},
{"id":"109","name":"zhangsan9","email":"zhangsan@126.com","mobile":"15900909899","status":1},
{"id":"110","name":"zhangsan10","email":"zhangsan@126.com","mobile":"15900909810","status":1}
],
"total":23
}
getdata-2.json
{
"rows":[
{"id":"201","name":"lisi1","email":"lisi@126.com","mobile":"13900909891","status":1},
{"id":"202","name":"lisi2","email":"lisi@126.com","mobile":"13900909892","status":1},
{"id":"203","name":"lisi3","email":"lisi@126.com","mobile":"13900909893","status":1},
{"id":"204","name":"lisi4","email":"lisi@126.com","mobile":"13900909894","status":1},
{"id":"205","name":"lisi5","email":"lisi@126.com","mobile":"13900909895","status":1},
{"id":"206","name":"lisi6","email":"lisi@126.com","mobile":"13900909896","status":1},
{"id":"207","name":"lisi7","email":"lisi@126.com","mobile":"13900909897","status":1},
{"id":"208","name":"lisi8","email":"lisi@126.com","mobile":"13900909898","status":1},
{"id":"209","name":"lisi9","email":"lisi@126.com","mobile":"13900909899","status":1},
{"id":"210","name":"lisi10","email":"lisi@126.com","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>