springboot+mybatis+分页列表查询

#项目结构

#entity层

package com.example.userlist.entity;
import java.io.Serializable;
import lombok.Data;
import lombok.experimental.Accessors;
/**
 * (Myusers)实体类
 *
 * @author
 */
@Data
@Accessors(chain = true)
public class Myusers implements Serializable {
    /**
     * 主键id
     */
    private Integer id;
    /**
     * 身份证号
     */
    private String sfz;
    /**
     * 姓名
     */
    private String xingming;
    /**
     * 年龄
     */
    private Integer nianling;
    /**
     * 籍贯
     */
    private String jiguan;

}

#page

package com.example.userlist.dto;
import lombok.Data;
import lombok.experimental.Accessors;
import java.io.Serializable;
@Data
@Accessors(chain = true)
public class MyusersPageQueryDto implements Serializable {
    private Integer pageNum = 1;
    private Integer pageSize = 10;
    /**
     * 身份证号
     */
    private String sfz;
    /**
     * 姓名
     */
    private String xingming;
    /**
     * 年龄
     */
    private Integer nianlingMax;
    private Integer nianlingMin;
    /**
     * 籍贯
     */
    private String jiguan;
}

#controller层

package com.example.userlist.controller;
import com.example.userlist.dto.MyusersPageQueryDto;
import com.example.userlist.service.MyusersService;
import com.example.userlist.util.Result;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
/**
 * (Myusers)表控制层
 *
 * @author
 */
@RestController
@RequestMapping("/myusers")
public class MyusersController {
    /**
     * 服务对象
     */
    @Autowired
    private MyusersService myusersService;
    @PostMapping("/findAll")
    public Result findAll(@RequestBody MyusersPageQueryDto myusersPageQueryDto) {
        return Result.ok().data(myusersService.findAllByPage(myusersPageQueryDto));
    }
}

#service层

package com.example.userlist.service.impl;
import com.example.userlist.dto.MyusersPageQueryDto;
import com.example.userlist.entity.Myusers;
import com.example.userlist.mapper.MyusersMapper;
import com.example.userlist.service.MyusersService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import com.github.pagehelper.Page;
import com.github.pagehelper.PageHelper;
import java.util.List;
import java.util.Map;
import java.util.HashMap;
/**
 * (Myusers)表服务实现类
 *
 * @author
 */
@Service("myusersService")
public class MyusersServiceImpl implements MyusersService {
    @Autowired
    private MyusersMapper myusersMapper;
    /**
     * 通过条件查询数据
     * @param myusersPageQueryDto 参数
     * @return 结果集
     */
    @Override
    public Map<String, Object> findAllByPage(MyusersPageQueryDto myusersPageQueryDto) {
        Map<String, Object> map = new HashMap<>(2);
        Page<Myusers> page = PageHelper.startPage(myusersPageQueryDto.getPageNum(), myusersPageQueryDto.getPageSize());;
        List<Myusers> models = myusersMapper.queryAll(myusersPageQueryDto);
        map.put("rows", models);
        map.put("count", page.getTotal());
        return map;
    }
}

#Mapper层.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.example.userlist.mapper.MyusersMapper">
    <resultMap type="com.example.userlist.entity.Myusers" id="MyusersMap">
        <result property="id" column="id" jdbcType="INTEGER"/>
        <result property="sfz" column="sfz" jdbcType="VARCHAR"/>
        <result property="xingming" column="xingming" jdbcType="VARCHAR"/>
        <result property="nianling" column="nianling" jdbcType="INTEGER"/>
        <result property="jiguan" column="jiguan" jdbcType="VARCHAR"/>
    </resultMap>
    <!--通过实体作为筛选条件查询-->
    <select id="queryAll" resultMap="MyusersMap">
        select
        id, sfz,xingming, nianling, jiguan
        from myusers
        <where>
           <if test="params != null">
<!--               <if test="params.xingming != null and params.xingming != ''">-->
<!--                   and xingming = #{params.xingming}-->
<!--               </if>-->
               <if test="params.xingming != null and params.xingming != '' ">
                   <!--   名称模糊查询 -->
                   and xingming like '%${params.xingming}%'
               </if>
               <if test="params.nianlingMax != null">
                   and nianling &lt;= #{params.nianlingMax}
               </if>
               <if test="params.nianlingMin != null">
                   and nianling >= #{params.nianlingMin}
               </if>
<!--               <if test="params.jiguan != null and params.jiguan != ''">-->
<!--                   and jiguan = #{params.jiguan}-->
<!--               </if>-->
               <if test="params.jiguan != null and params.jiguan != '' ">
                   <!--   籍贯模糊查询 -->
                   and jiguan like '%${params.jiguan}%'
               </if>
           </if>
        </where>
    </select>
</mapper>

#index.html

<!DOCTYPE html>
<html lang="zh" >
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="/js/jquery.js"></script>
    <title>列表查询</title>
    <style>
        .container{
            width: 600px;
            margin: 0 auto;
        }
        .page-wrap{
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 10px;
        }
        .form-item{
            margin: 5px 0;
        }
        .search-btn{
            float: right;
        }
        .table{
            width: 100%;
            margin-top: 20px;
            clear: both;
        }
        .page-wrap>div{
            margin: 0 10px;
        }
        .page-wrap>span{
            margin: 0 10px;
            cursor: pointer;
        }
        .s{
            text-decoration:none;
            color: #ff0000;
            font-size:18px;}
    </style>
</head>
<body>
    <div class="container">
        <form action="" onsubmit="">
            <div class="form-item">
                姓名：<input type="text" name="xingming" id="xingming">
            </div>
            <div class="form-item">
                年龄：自
                <input type="number" name="nianlingMin" id="nianlingMin">
                至
                <input type="number" name="nianlingMax" id="nianlingMax">
            </div>
            <div class="form-item">
                籍贯：<input type="text" name="jiguan" id="jiguan">
            </div>
            <button type="button" onclick="search()" class="search-btn">查询</button>
        </form>
        <table border class="table">
            <thead>
                <tr>
                    <th>身份证号</th>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>籍贯</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
        <div class="page-wrap">
            <span onclick="changePage('first')"><<</span><span onclick="changePage('prev')"><</span>
            第
            <div></div>
            页
            <span onclick="changePage('next')">></span><span onclick="changePage('last')">>></span>
        </div>
    </div>
    <script type="text/javascript">
        let pageNum = 1
        let pageSize = 10
        let pages = 0
        loadData()
        function loadData(){
            $.ajax({
                url: '/myusers/findAll',
                type: 'POST',
                contentType: 'application/json;charset=utf-8',
                data: JSON.stringify({
                    pageNum, pageSize,
                    sfz: $('#sfz').val(),
                    xingming: $('#xingming').val(),
                    nianlingMin: $('#nianlingMin').val(),
                    nianlingMax: $('#nianlingMax').val(),
                    jiguan: $('#jiguan').val()
                }),
                success: function (res){
                    $('.table tbody').html('')
                    res.data.rows.forEach(item =>{
                        $('.table tbody').append(`
                            <tr>
                                <td>${item.sfz}</td>
                                <td>${item.xingming}</td>
                                <td>${item.nianling}</td>
                                <td>${item.jiguan}</td>
                            </tr>
                        `)
                        // console.log(res);
                    })
                    let count = res.data.count
                    $('.page-wrap div').html('')
                    pages = Math.ceil(count / pageSize)
                    for (let i = 1; i <= pages; i++) {
                        if(pageNum==i){
                            $('.page-wrap div').append(
                                `
                            <a href class="s"  ="javascript: changePage(${i})">${i}</a>
                            `)
                        }else{
                            $('.page-wrap div').append(
                                `
                            <a href  ="javascript: changePage(${i})">${i}</a>
                            `
                            )
                        }
                    }
                }
            })
        }
        function search(){
            pageNum = 1
            loadData()
        }
        function changePage(page){
            if (isNaN(page)){
                if (page === 'first'){
                    pageNum = 1
                }else if (page === 'last'){
                    pageNum = pages
                }else if (page === 'prev'){
                    pageNum = Math.max(1, pageNum - 1)
                }else if (page === 'next'){
                    pageNum = Math.min(pages, pageNum + 1)
                }
            }else {
                pageNum = page
            }
            loadData()
        }
    </script>
</body>
</html>