Spring data jpa 分页+ layui数据表格渲染数据

Service： 

 Page<User> findUserCriteria(int page, int size,User user);

List<User> findAll();

ServiceImpl

 @Override
    public Page<User> findUserCriteria( int page, int size,User user) {
        Sort sort = new Sort(Sort.Direction.DESC,"id");   //根据id排序
        Pageable pageable = new PageRequest(page-1, size,sort);
        Page<User> userPage=userDao.findAll(new Specification<User>() {
            @Override
            public Predicate toPredicate(Root<User> root, CriteriaQuery<?> criteriaQuery, CriteriaBuilder criteriaBuilder) {
                List<Predicate> list = new ArrayList<Predicate>();
                /*根据name姓名搜索*/

                if(null!=user.getName()&&!"".equals(user.getName())){
                    list.add(criteriaBuilder.equal(root.get("name").as(String.class), user.getName()));
                }

                /*模糊搜索*/
               /* if (null != user.getName()&& !"".equals(user.getName())) {
                    list.add(criteriaBuilder.like(root.get("name"),"%"+user.getName()+"%" ));
                }*/
                Predicate[] p = new Predicate[list.size()];
                return criteriaBuilder.and(list.toArray(p));
            }
        },pageable);
        return userPage;
    }

 @Override
    public List<User> findAll() {

        return userDao.findAll();
    }

 

jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/layui-v2.4.4/layui/css/layui.css"  media="all">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>

<table class="layui-hide" id="test"></table>

<script src="${pageContext.request.contextPath}/static/layui-v2.4.4/layui/layui.js"></script>

<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->

<div class="demoTable">
    搜索ID：
    <div class="layui-inline">
        <input class="layui-input" name="id" id="demoReload" autocomplete="off">
    </div>
    <button class="layui-btn" data-type="reload">搜索</button>
</div>

<script>
    layui.use('table', function(){
        var table = layui.table;

        table.render({
            elem: '#test'
            ,url:'${pageContext.request.contextPath}/dcno2/findall'
            ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            ,cols: [[
                {field:'name', width:80, title: '姓名'}
                ,{field:'sex', width:80, title: '性别', sort: true}
                ,{field:'bm', width:80, title: '部门'}
            ]]
            ,id: 'testReload'
            ,parseData: function(res){ //res 即为原始返回的数据
                return {
                    success:true,
                    data: res.data.content, //解析数据列表
                    count:res.data.totalElements
                };
            }
            ,page:true
            ,response: {
                statusName: 'success' //规定数据状态的字段名称，默认：code
                ,statusCode: true //规定成功的状态码，默认：0
            }
            ,request: {
                pageName: 'currentPage' //页码的参数名称，默认：page
                ,limitName: 'rows' //每页数据量的参数名，默认：limit
            }
            ,method:'post'

            ,limit: 10 //注意：请务必确保 limit 参数（默认：10）是与你服务端限定的数据条数一致
            //支持所有基础参数
        });
        var $ = layui.$, active = {
            reload: function(){
                var demoReload = $('#demoReload');
                //执行重载
                table.reload('testReload', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    ,where: {
                      /*  key:{
                            name: demoReload.val()
                        }*/
                        name: demoReload.val(),
                    }
                });
            }
        };
        $('.demoTable .layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

    });
</script>

</body>
</html>