Layui数据表格分页

珂泽

2021 年 04 月 26 日

1443 次浏览

暂无评论

3036字数

编程笔记

上次只完成了JPA的整合，让JPA承担着操作数据库的重任，现在我们要为他添加分页功能，并且返回layui要求的json格式，以便于数据表格的正常加载

首先创建静态页面index.html,写上一个layui数据表格

<div class="layui-container">
    
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
        <legend>数据预览</legend>
    </fieldset>
    <table class="layui-hide" id="userlist"></table>

</div>

<script th:inline="NONE">
    layui.use(function(){
        var table = layui.table;

        table.render({
            elem: '#userlist'
            ,url:'/user/list/page'
            ,cols: [[
                {field:'id',  title: 'ID', sort: true,width: 100}
                ,{field:'username', width:80, title: '用户名'}
                ,{field:'pwd', title: '密码'}
                ,{field:'user_jurisdiction', title: '权限'}
            ]]
            ,page: true  // 开启分页
        });
    });
</script>

创建接口UserService

package cn.vwmwv.hgnuman.service;

import cn.vwmwv.hgnuman.entity.User;
import java.util.List;

public interface UserService {
    List<User> getPage(int pageNo, int pageSize);
}

创建类UserServiseImpl实现UserService接口

package cn.vwmwv.hgnuman.service.impl;

import cn.vwmwv.hgnuman.entity.User;
import cn.vwmwv.hgnuman.repository.UserRepository;
import cn.vwmwv.hgnuman.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.domain.Page;
import org.springframework.data.domain.PageRequest;
import org.springframework.data.domain.Pageable;
import org.springframework.data.domain.Sort;
import org.springframework.data.jpa.domain.Specification;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;

import javax.persistence.criteria.CriteriaBuilder;
import javax.persistence.criteria.CriteriaQuery;
import javax.persistence.criteria.Predicate;
import javax.persistence.criteria.Root;
import java.util.List;


@Service("UserService")
public class UserServiceImpl implements UserService {
    @Autowired
    private UserRepository userRepository;
    @Transactional(readOnly = true)
    public List<User> getPage(int pageNo,int pageSize){ // 传入页页码和每页要显示的数据量
        Pageable pageable =  PageRequest.of(pageNo - 1,pageSize); // pageable查询条件
//        Page<User> userPage = userRepository.findAll(pageable);
//        List<User> userList = userPage.getContent();
        
        // 通过findAll查询pageable条件，并将Page中content的内容返回给userlist
        List<User> userList = userRepository.findAll(pageable).getContent();  
        return userList; // 返回list
    }

}

在UserController内处理/user/list/page路由，并且在前台自动加载

@Autowired
private UserService userService;

@GetMapping("/user/list/page") // 以layui格式显示用户列表
public Map<String, Object> getUserListByPage(@RequestParam(value="page",required=false) Integer page, @RequestParam(value="limit",required=false)Integer limit){

    Map<String,Object> resultMap=new HashMap<>();
    List<User> userList = userService.getPage(page,limit); // 通过UserServiceImpl中的getPage函数获取用户列表List
    Long count = userRepository.count(); // 获取总数量
    resultMap.put("code", 0);  // 设置layui要求的格式，以下都是
    resultMap.put("count", count);
    resultMap.put("data", userList);
    return resultMap;
}

Layui数据表格分页