LayUI table分页把后端数据全部显示,没有分页的问题
首先我的理解的是,我把全部数据传回前端LayUI table就会帮我分页,但结果不是这样。其实分页的工作还是在后端,当使用table通过URL请求数据时,同时还会携带page和limit两个参数(分别是当前页码和限制一页显示的数量),我们需要在后端获取这两个值,完成分页
1、先上代码
table.render({
elem: '#currentTableId',
// url: '[[@{/api/table-patient.json}]]',
url: '[[@{/patientList}]]',
page: true,
cols: [
[
{type:'numbers'},
{field: 'patientName', width: 120, title: '姓名', align: "center"},
{field: 'patientIdNumber', title: '身份证', width: 250, minWidth: 80, align: "center"},
{field: 'patientSex', width: 80, title: '性别', align: "center"},
{field: 'patientAge', width: 80, title: '年龄', align: "center"},
{field: 'patientBirthday', width: 160, title: '出生日期', align: "center"},
// {field: 'time', width: 80, title: '初复诊', align: "center"},
{field: 'room', width: 120, title: '科室', align: "center"},
{field: 'doctor', width: 120, title: '医生', align: "center"},
{field: 'cost', width: 100, title: '费用', align: "center"},
{title: '操作', minWidth: 50, templet: '#currentTableBar', fixed: "right", align: "center"}
]
]
});
这是写在HTML里的LayUI代码,目的是向patientList(一个controller)请求数据。
2、下面是patientList代码
@RequestMapping("/patientList")
@ResponseBody
public PatientJson patientList(String page, String limit){
int pageTemp = Integer.parseInt(page);
int limitTemp = Integer.parseInt(limit);
List<PatientList> patientLists = new ArrayList<>();
PatientList patientList;
for (int i = 0; i<30; i++){
patientList = new PatientList();
patientList.setPatientIdNumber("100000"+i*5);
patientList.setPatientName("xlk"+i);
patientList.setPatientAge(i*8);
patientList.setPatientSex("男");
patientList.setPatientBirthday(new Date(2001+i,2+i,14+i));
patientList.setDoctor("厉害");
patientList.setRoom("眼科");
patientList.setCost(2.5);
patientLists.add(patientList);
}
PatientJson patientJson = new PatientJson();
patientJson.setCode(0);
patientJson.setCount(patientLists.size());
int onePageNumber = pageTemp*limitTemp;
if (onePageNumber > patientLists.size()){
onePageNumber = patientLists.size();
}
patientJson.setData(patientLists.subList((pageTemp-1)*limitTemp,onePageNumber));
return patientJson;
}
这里是我设计的临时数据,若是获取数据库的数据同理。可以使用下面语句
“select * from table limit ((page - 1)*limit),limit;”。