jQuery EasyUI , Pagination分页

最新推荐文章于 2022-05-09 20:21:14 发布

原创最新推荐文章于 2022-05-09 20:21:14 发布 · 335 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#EasyUI #Pagination分页

js 同时被 2 个专栏收录

20 篇文章

订阅专栏

EasyUI

1 篇文章

订阅专栏

本文详细介绍了如何使用EasyUI进行分页操作，包括前端代码实现和后台数据加载逻辑，通过示例代码展示了如何自定义分页组件并处理分页事件。

一，前端，使用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;
		}
	}
	
	
}