一，前端，使用EasyUI进行分页简单快捷，但是官网上的demo和网上的资料都没有一个很好的解释，因为官网上的分页说明中url指向的是返回json的后台方法，所有网上很多的介绍也是前端结合后台struts2的使用，但是大多数情况下人们的开发不一定使用到这个框架，所以自己改了一下前端供大家参考；
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Custom DataGrid Pager - jQuery EasyUI Demo</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.css">
<script type="text/javascript" src="../../jquery.min.js"></script>
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
<h2>Custom DataGrid Pager</h2>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div>You can append some buttons to the standard datagrid pager
bar.</div>
</div>
<div style="margin:10px 0;"></div>
<table id="dg" class="easyui-datagrid" style="width:700px;height:250px">
<thead>
<tr>
<th data-options="field:'itemid',width:80">Item ID</th>
<th data-options="field:'productid',width:100">Product</th>
<th data-options="field:'listprice',width:80,align:'right'">List
Price</th>
<th data-options="field:'unitcost',width:80,align:'right'">Unit
Cost</th>
<th data-options="field:'attr1',width:240">Attribute</th>
<th data-options="field:'status',width:60,align:'center'">Status</th>
</tr>
</thead>
</table>
<script type="text/javascript">
function getData(id, name, page, pageSize) {
$.post('../../../../services/TR/test', {
id : '34',
name : '56',
page : page,
pageSize : pageSize
}, function(rs) {
var rsJ = eval('(' + rs + ')');
var rows = rsJ.rows;
var total = rsJ.total;
$('#dg').datagrid("loadData", rsJ);
});
}
$(function() {
getData('ij', 'zhang', 1, 10);
$('#dg').datagrid({
title : '分页表测试',
pagination : true,//分页控件
rownumbers : true,//行号
//添加复选框
//frozenColumns : [ [ {
//field : 'ck',
//checkbox : true
//} ] ],
//顶部工具了
toolbar : [ {
text : '添加',
iconCls : 'icon-add',
handler : function() {
//数据添加处理
}
}, '-', {
text : '修改',
iconCls : 'icon-edit',
handler : function() {
//数据修改处理
}
}, '-', {
text : '删除',
iconCls : 'icon-remove',
handler : function() {
//数据删除处理
}
} ]
});
var pager = $('#dg').datagrid('getPager'); // get the pager of datagrid
pager.pagination({
displayMsg : '当前显示{from}-{to}条记录 共{total}条记录',
beforePageText : '第',
afterPageText : '页 共 {pages} 页',
//点击下、前一页，首页、末页的时候做的事情
onSelectPage : function(pageNumber, pageSize) {
getData('ij', 'zhang', pageNumber, pageSize);
},
//改变一页大小后做的事情
onChangePageSize : function(pageSize) {
alert(pageSize);
},
//点击刷新按钮在刷新之前做的事情
onBeforeRefresh : function(pageNumber, pageSize) {
alert(1);
},
//点击刷新按钮在刷新之后做的事情
onRefresh : function(pageNumber, pageSize) {
alert(2);
}
//与分页效果在一块的底部工具栏
// buttons:[{
// iconCls:'icon-search',
// handler:function(){
// alert('search');
// }
// },{
// iconCls:'icon-add',
// handler:function(){
// alert('add');
// }
// },{
// iconCls:'icon-edit',
// handler:function(){
// alert('edit');
// }
// }]
});
});
</script>
</body>
</html>
二，后台，我后台使用的是注解式Jersey，你们也可以改成其他的方法。另外我里面的数据使用的是假数据，你们尽可以改为你们所需的数据，传的参数也尽可以改为你们查询时所传递的实际有效参数，@FormParam("page") int page, @FormParam("pageSize") int pageSize这些参数就是你们查数据的时候所用到的。
package cn.tongmap.mf.resource;
import javax.ws.rs.FormParam;
import javax.ws.rs.POST;
import javax.ws.rs.Path;
import javax.ws.rs.Produces;
/**
*
* @author lxzqz
*
*/
@Path("TR")
public class TestResource {
@POST
@Path("test")
@Produces("text/plain")
public String test(@FormParam("id") String id, @FormParam("name") String name, @FormParam("page") int page, @FormParam("pageSize") int pageSize) {
System.out.println(id + ";" + name);
String str1 = "{'total':13,'rows':[" +
"{'productid':'FI-SW-01','productname':'Koi','unitcost':10.00,'status':'P','listprice':36.50,'attr1':'Large','itemid':'EST-1'}," +
"{'productid':'K9-DL-01','productname':'Dalmation','unitcost':12.00,'status':'P','listprice':18.50,'attr1':'Spotted Adult Female','itemid':'EST-10'}," +
"{'productid':'RP-SN-01','productname':'Rattlesnake','unitcost':12.00,'status':'P','listprice':38.50,'attr1':'Venomless','itemid':'EST-11'}," +
"{'productid':'RP-SN-01','productname':'Rattlesnake','unitcost':12.00,'status':'P','listprice':26.50,'attr1':'Rattleless','itemid':'EST-12'}," +
"{'productid':'RP-LI-02','productname':'Iguana','unitcost':12.00,'status':'P','listprice':35.50,'attr1':'Green Adult','itemid':'EST-13'}," +
"{'productid':'FL-DSH-01','productname':'Manx','unitcost':12.00,'status':'P','listprice':158.50,'attr1':'Tailless','itemid':'EST-14'}," +
"{'productid':'FL-DSH-01','productname':'Manx','unitcost':12.00,'status':'P','listprice':83.50,'attr1':'With tail','itemid':'EST-15'}," +
"{'productid':'FL-DLH-02','productname':'Persian','unitcost':12.00,'status':'P','listprice':23.50,'attr1':'Adult Female','itemid':'EST-16'}," +
"{'productid':'FL-DLH-02','productname':'Persian','unitcost':12.00,'status':'P','listprice':89.50,'attr1':'Adult Male','itemid':'EST-17'}," +
"{'productid':'AV-CB-01','productname':'Amazon Parrot','unitcost':92.00,'status':'P','listprice':63.50,'attr1':'Adult Male','itemid':'EST-18'}" +
"]}";
String str2 = "{'total':13,'rows':[" +
"{'productid':'zhang','productname':'Koi','unitcost':10.00,'status':'P','listprice':36.50,'attr1':'Large','itemid':'EST-1'}," +
"{'productid':'quan','productname':'Dalmation','unitcost':12.00,'status':'P','listprice':18.50,'attr1':'Spotted Adult Female','itemid':'EST-10'}," +
"{'productid':'zhong','productname':'Rattlesnake','unitcost':12.00,'status':'P','listprice':38.50,'attr1':'Venomless','itemid':'EST-11'}" +
"]}";
if(page == 1) {
return str1;
} else {
return str2;
}
}
}