一，前端，使用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;
}
}
}
相关推荐
两种扩展方式，自己看情况选择，重写的分页属性。
NULL 博文链接：https://shadow5314.iteye.com/blog/1541260
EasyUI 的 datagrid 支持服务器端分页，但是官方的资料比较少，以下总结了两种 datagrid 的服务器端分页机制，可根据情况具体使用。 一、使用 datagrid 默认机制 后台： public JsonResult GetQuestionUnit() { //...
jQuery EasyUI API 中文文档 - Pagination分页，使用jQuery EasyUI的朋友可以参考下。
在本书中，读者不但可以学到搜索框（searchbox）、进度条（progressbar）、提示框（tooltip）等功能性插件，还可以掌握布局（layout），以及强大的数据网格（datagrid）和分页（pagination）等插件。
本 chm 文档是根据博客园“风流涕淌”的《jQuery EasyUI 1.2.4 API 中文文档（完整）目录》整理而成 http://www.cnblogs.com/Philoo/archive/2011/11/17/jeasyui_api_index.html Base 基础 Documentation 文档 ...
本文实例讲述了jQuery EasyUI datagrid实现本地分页的方法。分享给大家供大家参考。具体如下： 一般分页都是后台做，前端做无论从哪方面考虑都不合适。但是有的时候还是有这种需求。 这里重点用到了pagination的监听...
pagination：修复在'displayMsg'属性设置为false的时候会缩小分页组件高度的问题； tabs：修复tab组件面板对象的'onLoad'事件中传递了错误的'data'参数的问题。 Improvement（改进） draggable：添加'onEndDrag'...
jQuery easyUI 培训 教程 1 Accordion（可折叠标签） 2 1.1 实例 2 1.2 参数 3 2 DateBox（日期框） 4 2.1 实例 4 2.2 参数 6 2.3 事件 6 2.4 方法 6 3 ComboBox(组合框) 7 3.1 实例 7 3.2 参数 9 3.3 事件 9 3.4 ...
用 $.fn.pagination.defaults 重写了 defaults。 依赖 linkbutton 用法 代码如下: ”pp” xss=removed></div> 代码如下: $(‘#pp’).pagination({ total:2000, pageSize:10 }); 特性 名称 类型 说明 默认值...
pagination:true }); 上面的代码，我们可以添加列的checkbox属性，然后他就会出现选择列。如果idField属性被设置，DataGrid的选择会被不同的页保持。 自定义DataGrid分页 DataGrid内建分页能力是强大的，它比...
采用Jquery无刷新分页插件jquery.pagination.js 实现无刷新分页效果 友情提示：本示例Handler中采用StringBuilder的append方法追加HTML，小数据量可以，但是大数据或是布局常变，建议返回JSON格式的数据，性能和灵活...
jQuery+EasyUI+1.2.4+API+中文文档，有时间好好看一下，目录如下： Base 基础 Documentation 文档 Parser 解析器 EasyLoader 加载器 Draggable 可拖拽 Droppable 可释放 Resizable 可调整尺寸 Pagination...
使用jQuery easyUI 创建一个 RSS Feed阅读器 Drag and Drop easyUI 基础的拖动和放置 使用easyUI创建一个拖放的购物车 使用easyUI创建一个课程表 Menu and Button 使用easyUI创建简单的菜单 使用easyUI...
8 Pagination（分页） 20 8.1 实例 20 8.2 参数 22 8.3 事件 23 9 Window（窗口） 23 9.1 实例 23 9.2 参数 25 9.3 事件 26 9.4 方法 26 10 Panel（面板） 26 10.1 实例 26 10.2 参数 28 10.3 事件 29 10.4 方法 29 ...
8 Pagination（分页） 20 8.1 实例 20 8.2 参数 22 8.3 事件 23 9 Window（窗口） 23 9.1 实例 23 9.2 参数 25 9.3 事件 26 9.4 方法 26 10 Panel（面板） 26 10.1 实例 26 10.2 参数 28 10.3 事件 29 10.4 方法 29 ...
myJqueryUI目前包括linkbutton(超链接按钮)、pagination(分页工具栏)、datagrid(数据表格)三个组件。是参考JqueryEasyUI的样式和布局结构，继承JqueryUI_widget实现的。
myJqueryUI目前包括linkbutton(超链接按钮)、pagination(分页工具栏)、datagrid(数据表格)三个组件。是参考JqueryEasyUI的样式和布局结构，继承JqueryUI_widget实现的。
myJqueryUI目前包括linkbutton(超链接按钮)、pagination(分页工具栏)、datagrid(数据表格)三个组件。是参考JqueryEasyUI的样式和布局结构，继承JqueryUI_widget实现的。