完整layui中table的完整分页加载以及根据条件搜索问题

js代码

 layui.use(['table', 'laypage','jquery'], function () {
        var table = layui.table, laypage = layui.laypage, $ = layui.jquery; //分页
        table.render({
            elem: '#test'
            , url: '/roles/listRoles'
            ,method:"post"
            , page: true
            ,height: $(document).height() - $('#test').offset().top - 40
            ,id: 'rolesReload'
            , cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            , cols: [[
                {field: 'id', width:'10%', title: 'ID', sort: true}
                , {field: 'name', width:'20%', title: '角色'}
                , {field: 'description', width:'30%', title: '描述'}
                , {field: 'updateTime', width:'30%', title: '修改时间'}
                , {field: 'createTime', width:'30%', title: '创建时间'}
                , {fixed: 'right', width:'10%', align: 'center', toolbar: '#barDemo', title: '操作'}
            ]]
            , parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
                console.log(res)
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.msg, //解析提示文本
                    "count": res.count, //解析数据长度
                    "data": res.roleList //解析数据列表
                };
            },done: function () {
                $(".operation").each(function(){
                   if($.inArray("sys:role:"+$(this).attr('lay-event'), pers)==-1){
                       $(this).hide();
                   }
                });
            }
        });

        //监听行工具事件
        table.on('tool(test)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data //获得当前行数据
                , layEvent = obj.event; //获得 lay-event 对应的值
            if (layEvent === 'del') {
                layer.msg('删除');
            } else if (layEvent === 'edit'){
                window.location= "addRole.html?id="+data.id;
            }
        });

        active = {
            reload: function () {
                search_roles();
            }
        };

        $('.layui-col-md4 .layui-btn').on('click', function(){   //  点击搜索
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
        $('#search_roles').on('keydown', function (event) {
            if (event.keyCode == "13") {
                //回车执行查询
                search_roles();
            }
        });
        function search_roles() {
            var search_roles = $('#search_roles').val();
            console.log(search_roles)
            //执行重载
            table.reload('rolesReload', {
                page: {
                    curr: 1 //重新从第 1 页开始
                }
                , where: {
                    searchRole: search_roles,
                }
            });
        }
    });

html页面

  <div>
        <!-- 内容主体区域 -->
        <!--搜索区域-->
        <div style="height: 40px">
            <div class="layui-col-md4">
                <label class="layui-form-label">角色名称</label>
                <div class="layui-inline">
                    <input type="text" name="search_roles" id="search_roles" class="layui-input"
                           autocomplete="off">
                </div>
                <button class="layui-btn" data-type="reload">搜索</button>
            </div>
        </div>
        <!--表格-->
        <table class="layui-hide" id="test" lay-filter="test">
        </table>
        <script type="text/html" id="barDemo">
            <a class="operation" lay-event="edit">
                <i class="layui-btn layui-btn-xs">编辑</i>
            </a>
            <a class="operation" lay-event="del">
                <i class="layui-btn layui-btn-danger layui-btn-xs">删除</i>
            </a>
        </script>

    </div>

后端分页代码，layui官方文档只有前端后台分页没有写，所以当你使用时不能分页是正常的
1，引入pagehelper

   <dependency>
            <groupId>com.github.pagehelper</groupId>
            <artifactId>pagehelper-spring-boot-starter</artifactId>
            <version>1.2.13</version>
        </dependency>

2,数据库查询语句两条，一条查询总共多少条，一条查询返回数据

  <sql id="where">
        <where>
            <if test="searchRole != null and searchRole != ''">
                and t.description like concat('%', #{searchRole}, '%')
            </if>
        </where>
    </sql>

    <select id="count" resultType="int">
        select count(1) from sys_role t
        <include refid="where" />
    </select>

    <select id="list" resultType="Role">
        select * from sys_role t
        <include refid="where" />
    </select>

3，写一个查询的返回类pageResult

@Data  //这里这个data是我使用的lombok，否则需要自己getset封装
public class PageResult implements Serializable {
    private static final long serialVersionUID = 620421858510718076L;
    private Integer code;
    private String msg;
    private Integer count;
    private List<?> data;
}

4，在调用次此sql的时候，在查询数据的前面添加pagehelper方法，会自动进行分页

@RequestMapping(value = "/listRoles",method = RequestMethod.POST)
    public Object listRoles(@RequestParam(value = "page", required = false)int page,
                            @RequestParam(value = "limit", required = false)int limit,
                            @RequestParam( value = "searchRole", required = false)String searchRole) {
        int count = roleDao.count(searchRole);
        PageHelper.startPage(page, limit);
        List<Role> roleList=roleDao.list(searchRole);
        PageResult pageResult=new PageResult();
        pageResult.setCode(0);
        pageResult.setCount(count);
        pageResult.setMsg("查询成功");
        pageResult.setData(roleList);
        return pageResult;
    }