layui列表查询及分页

官方文档：

https://www.layui.com/doc/modules/table.html

效果图：

页面：

    
    
    
    
    
    
    




    

        

            

                

                    

                        

                            新增
                        
                        

                            
                                

                                    
                                
                                搜索
                            
                        
                    
                
                

                    <#--table容器-->
                    
                    <#--绑定列工具条-->
                    

                        编辑
                        删除
                    
                
            
        
    

js：

$(function () {
    search();
});

function search() {
    layui.use('table', function(){
        var table = layui.table;
        var codeLike=$('#codeLike').val();//模糊查询条件

        //展示已知数据
        table.render({
            elem: '#tableData' //指定table容器
            ,url: '/machine/list.dd' //数据接口
            ,method:'post'
            ,where:{codeLike:codeLike} //额外参数
            ,even: true //开启隔行背景
            ,cols: [[ //表头
                {field: 'code', title: '编号'}
                ,{field: 'typeId', title: '类型'}
                ,{field: 'businessId', title: '商圈'}
                ,{field: 'userId', title: '加盟商'}
                ,{field: 'startTime', title: '服务开始时间'}
                ,{field: 'endTime', title: '服务结束时间'}
                ,{field: 'status', title: '状态'}
                ,{title: '操作',toolbar: '#tools'}
            ]]
            ,page:{
                layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
                ,groups: 6 //只显示 1 个连续页码
            }
        });

    });
}

controller：

/**
     * 查询设备列表
     * @return
     */
    @PostMapping("/list.dd")
    @ResponseBody
    public LayuiReplay> list(@RequestParam(defaultValue = "") String codeLike,
                                                 @RequestParam(defaultValue = "1") Integer page,
                                                 @RequestParam(defaultValue = "10") Integer limit){
        Map map=new HashMap();
        map.put("codeLike","%"+codeLike+"%");//查询条件 code
        PageHelper.startPage(page, limit,"code");//后端使用PageHelper分页 code为排序字段
        Page> machineList = machineService.list(map);

        return new LayuiReplay>(0, "OK", Integer.parseInt(machineList.getTotal()+""), machineList);
    }

传值给layui的工具类：

package com.iqj.project.common.utils;

import com.google.gson.Gson;
import java.util.List;

/**
 * @author 17
 * @date 2018/11/27 16:45
 * @describe
 */
public class LayuiReplay {
    private int code;
    private String msg;
    private int count;
    private List data;

    public LayuiReplay(int code, String msg, int count, List data) {
        this.code = code;
        this.msg = msg;
        this.count = count;
        this.data = data;
    }

    public String toJson() {
        Gson gson = new Gson();
        String json = gson.toJson(this);
        return json;
    }

    public int getCode() {
        return code;
    }

    public void setCode(int code) {
        this.code = code;
    }

    public String getMsg() {
        return msg;
    }

    public void setMsg(String msg) {
        this.msg = msg;
    }

    public int getCount() {
        return count;
    }

    public void setCount(int count) {
        this.count = count;
    }

    public List getData() {
        return data;
    }

    public void setData(List data) {
        this.data = data;
    }
}

注意看文档，这三个参数之间的传递是实现分页的关键：