JavaWeb分页查询Layui数据表格

本文介绍了如何在JavaWeb应用中结合Layui实现分页查询功能。内容包括jsp页面的表格初始化,配置分页参数;servlet中进行数据查询,调用分页工具类处理数据,返回分页后的列表;以及分页工具类和Layui数据格式对应类的设计和使用。

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

  【1】 jsp内容:主要就是初始化表格,以及表格重载查询数据。需要注意的就是初始化表格的时候需要
配置page基础参数项的数据来进行开启分页。

//初始化表格方法
function renderTable(){
layuiTable.render({
	elem : "#tbSellHistory",
	totalRow : true, //开启合计
	cols : [ [
		{ title : ' ', type : 'numbers', totalRowText : '合计' },
		{ title : 'ID', field : 'sellId', type : 'radio',  hide : true },
		{ title : '单号', field : 'sellNumber', align : 'center' },
		{ title : '单据日期', field : 'sellDate', align : 'center' },
		{ title : '数量', field : 'amount', align : 'center', totalRow : true },
		{ title : '金额', field : 'sellSum', align : 'center', totalRow : true },
		{ title : '营业员', field : 'userName', align : 'center' },
		{ title : '备注', field : 'remark', align : 'center' },
		{ title : '最后操作', field : 'lastUserName', align : 'center' },
		{ title : '更新时间', field : 'sellTime', align : 'center' } ]],
	page :  {//开启分页,设置分页配置数据
		limit : 5, //默认每页显示的数据条数
		limits : [5, 10, 15, 20, 25, 30, 35, 40, 45, 50], //每页条数的选择项
	},
	data : [],
	id : "tbSellHistory",
	height : 'full-433' //定高出现滚动条
});
}
//表格重载执行查询点击事件
$("#searchHistory").click(function(){
var bDate = $("#begionDate").val().trim();
	var eDate = $("#endDate").val().trim();
		layuiTable.reload("tbSellHistory", {
			url : "${syspath}/servlet/SellServlet?type=sellHistory",
			where : {
				begion : bDate, end : eDate
			}
		});
	}
});

  【2】 servlet内容:查询流程→查询所有数据List→调用分页工具类得到分页后的数据→返回分页后
的数据。需要说一下的是这里需要获取两个参数,然后根据这两个参数来进行分页查询。一个是表格的当前页page,一个是每页显示的条数limit。

private void findByPage(HttpServletRequest request,HttpServletResponse response) throws ServletException, IOException {
	// limit 每页显示的数据条数
	int limit = Integer.valueOf(request.getParameter("limit"));
	// page 当前页
	int page = Integer.valueOf(request.getParameter("page"));
	String begion = request.getParameter("begion");// 开始时间
	String end = request.getParameter("end");// 结束时间
	// 执行dao接口方法查询所有数据
	List<SellUntieDataVo> untieDataVo = iSellDao.findSellHistory(begion,end);
	// 使用构造器实例化分页工具类对象传入(当前页,每页条数,需要分页的所有数据)得到分页后的数据
	DataPageUtil<SellUntieDataVo> pageUtil = new DataPageUtil<SellUntieDataVo>(
		page, limit, untieDataVo);
	// 使用构造器实例化Layui表格所需数据格式的对象,确保返回的数据格式能被正确读取
	LayuiTableData<SellUntieDataVo> data = new LayuiTableData<SellUntieDataVo>(
		untieDataVo.size(), pageUtil.OkData());
	PrintWriter out = response.getWriter();
	// 调用toJson()方法转换为json格式数据返回
	out.write(ToJsonUtil.toJson(data));
	out.flush();
	out.close();
}

  【3】 分页工具类以及与Layui数据格式对应的类的内容:

//分页工具类。分页的思路:获取到当前页的第一条和最后一条数据的索引,然后使用for循环生成一个包含当前页第一条和最后一条以及他们之间的数据的新的数据列表。最后页面分页后显示的内容就是这个新的数据列表的数据。
public class DataPageUtil<T> {
	private List<T> data;// 数据
	private int curPage;// 当前页
	private int totalCount;// 总条数
	private int pageSize;// 每页显示的条数
	//构造数据
	public DataPageUtil(int curPage, int pageSize, List<T> data) {
		this.data = data;
		this.curPage = curPage;
		this.pageSize = pageSize;
		this.totalCount = data.size();
	}
	//拿到分页后的数据
	public List<T> OkData() {
		List<T> list = new ArrayList<T>();
		for (int i = beginIndex(pageSize, curPage); i <= endIndex(pageSize,
				curPage); i++) {
			if (i < totalCount) {
				list.add(data.get(i));
			}
		}
		return list;
	}
	//求当前页的第一条数据的索引
	public static int beginIndex(int pageSize, int curPage) {
		Integer begin = pageSize * (curPage - 1);
		return begin;
	}
	//求当前页的最后一条数据的索引
	public static int endIndex(int pageSize, int curPage) {
		Integer end = (pageSize * curPage) - 1;
		return end;
	}
}
//与Layui数据格式对应的类
public class LayuiTableData<T> {
	private int code;// 状态码
	private String msg;// 描述
	private int count;// 数据条数
	private List<T> data;// 数据
	public LayuiTableData(int count, List<T> data) {
		this.count = count;
		this.data = data;
	}
}

  最后说明:两个类我都是使用构造器来初始化数据的,当然也可以使用get,set方法的形式来完整相同的操作。我这里完全是图个方便。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值