LayUI table分页显示问题

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;”。

猜你喜欢

转载自blog.csdn.net/xlk_1996/article/details/103693069