【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方法的形式来完整相同的操作。我这里完全是图个方便。