EasyUi中的“假分页”，如何将它“打回原形”

最新推荐文章于 2021-07-21 15:04:37 发布

一生所Ai

最新推荐文章于 2021-07-21 15:04:37 发布

阅读量488

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaWeb 文章标签： easyUI datagrid

本文链接：https://blog.youkuaiyun.com/qq_40180411/article/details/82767037

JavaWeb 专栏收录该内容

42 篇文章

订阅专栏

本文介绍如何在EasyUI DataGrid中实现真实分页而非假分页，通过修改后端数据返回格式，调整DataGrid配置并展示具体实现代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先先说一下什么是假分页，这是我在使用EasyUi中DataGrid来做后台界面数据显示时遇到的问题。

先介绍一下DataGrid

DataGrid（数据表格）

扩展自$.fn.panel.defaults。使用$.fn.datagrid.defaults重写默认值对象。

DataGrid以表格形式展示数据，并提供了丰富的选择、排序、分组和编辑数据的功能支持。DataGrid的设计用于缩短开发时间，并且使开发人员不需要具备特定的知识。它是轻量级的且功能丰富。单元格合并、多列标题、冻结列和页脚只是其中的一小部分功能。

所谓的假分页就像下面这样，我们连接数据库查询到20条数据响应到页面上，使用EasyUi的:

pagination

boolean

如果为true，则在DataGrid控件底部显示分页工具栏。

在页面底部显示，但是选择每页显示10条根本没用，它显示的还是20条每页。所以这就是假分页。

是什么原因导致的“假分页”？

我们看一下手册是怎么说得：

打开它：

{"total":28,"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"}
]}

这就很清楚了，easyUI实现分页显示是按照这种固定格式显示的，所以我们需要我们要显示的数据改造一下

话不多说看代码：

核心代码如下：

public class DataGrid<M> {
	private Integer total;
	private List<M> rows;
	public Integer getTotal() {
		return total;
	}
	public void setTotal(Integer total) {
		this.total = total;
	}
	public List<M> getRows() {
		return rows;
	}
	public void setRows(List<M> rows) {
		this.rows = rows;
	}
	
}

public DataGrid<User> list(int page, int rows) {
		try {
			DataGrid <User> data=new DataGrid<>();
			int count=userdao.count("select count(*) from t_user");
			List<User> users=userdao.list("select id,username,userpwd,email,hobby,address from t_user limit ?,?",(page-1)*rows,rows);
			data.setTotal(count);
			data.setRows(users);
			return data;
		}finally {
			JdbcUtil.closeConnection();
		}
	}

@WebServlet("/user/list")
public class UserServlet extends HttpServlet{
	public void doGet(HttpServletRequest request,HttpServletResponse response) throws IOException,ServletException{		
		response.setContentType("application/json;charset=utf-8");
		PrintWriter out=response.getWriter();
		//1.获取参数
		String page=request.getParameter("page");
		String rows=request.getParameter("rows");
		 // 2.业务响应		
		UserService userService = new UserServiceImpl();
		DataGrid<User> data= userService.list(Integer.parseInt(page),Integer.parseInt(rows));
		 //3.响应
		Gson gson=new Gson();
		String json=gson.toJson(data);
		out.print(json);
		out.close();
	}
	public void doPost(HttpServletRequest request,HttpServletResponse response) throws IOException,ServletException{		
		this.doGet(request, response);
	}
}

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>users</title>
<link rel="stylesheet" href="easyui/themes/black/easyui.css">
<link rel="stylesheet" href="easyui/themes/icon.css">
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="easyui/easyui-lang-zh_CN.js"></script>
<script type="text/javascript">
$(function(){
	$('#dg').datagrid({    
	    url:'user/list', 
	   		title:'用户列表',
			iconCls:'icon-save',
			fitColumns:true,
			striped:true,
			pagination:true,
			columns:[[    
	        {field:'id',title:'编号',width:100},    
	        {field:'username',title:'用户名',width:100},    
	        {field:'email',title:'邮箱',width:200}, 
	        {field:'address',title:'地址',width:200},   
	        {field:'hobby',title:'爱好',width:100}    
	    ]]    
	})  
});
</script>
</head>
<body>
	<table id="dg"></table>  
</body>
</html>

好了：我们来试一下：