SpringBoot + laypage分页 + 模糊查询

        之前写过一篇关于JSP调用laypage分页的博客，写的比较详细，但是也比较繁杂，正好由于新项目分页的需要，故用SpringBoot将其重写，顺便集成了模糊查询。

1.效果图

2.domain(实体类)

package com.springboot.domian;


/**
 * @classDesc: 区县模型
 * @author: Vipin Zheng
 * @createDate: 2018-05-06 11:11:17
 * @version: v1.0
 */

public class District {

    private Long did;

    private String dname;

    private String postcode;

    private City city;

    // get、set方法略
}

package com.springboot.domian;


/**
 * @classDesc: 城市模型
 * @author: Vipin Zheng
 * @createDate: 2018-05-06 11:08:33
 * @version: v1.0
 */

public class City {

    private Long cid;

    private String cname;

    private String areacode;

    private Province province;

    // get、set方法略
}

package com.springboot.domian;


/**
 * @classDesc: 省份模型
 * @author: Vipin Zheng
 * @createDate: 2018-05-06 11:06:37
 * @version: v1.0
 */
public class Province {

    private Long pid;

    private String pname;

    private Long orderid;

    // get、set方法略
}

package com.springboot.domian;

import java.util.List;

/**
 * 分页封装类
 *
 * @param <T>
 */
public class Pager<T> {
    // 查询页码
    private Integer page;
    // 每页条数
    private Integer size;
    // 总记录数
    private Long total;
    // 分页数据
    List<T> list;

    // get、set方法略
}

package com.springboot.domian;

/**
 * @classDesc: 自定义返回值模型
 * @author: Vipin Zheng
 * @createDate: 2018-05-06 18:05:43
 * @version: v1.0
 */
public class CustomType {
    private Integer code;
    private Object result;

    public CustomType(Integer code, Object result) {
        this.code = code;
        this.result = result;
    }

    // get、set方法略
}

3.dao(数据操作接口)

package com.springboot.mapper;

import com.springboot.domian.District;
import org.apache.ibatis.annotations.Param;
import org.springframework.stereotype.Repository;

import java.util.List;

@Repository
public interface DistrictMapper {
    /**
     * 查询分页数据
     *
     * @param name 模糊查询关键字
     * @param page 页数
     * @param size 每页条数
     * @return 分页数据
     */
    List<District> find(@Param("name") String name,
                        @Param("page") Integer page,
                        @Param("size") Integer size);

    /**
     * 查询符合条件的总记录数
     * @param name 模糊查询关键字
     * @return 总记录数
     */
    Long getTotal(@Param("name") String name);
}

4.service(业务逻辑处理类)

package com.springboot.service;

import com.springboot.domian.District;
import com.springboot.domian.Pager;
import com.springboot.mapper.DistrictMapper;
import org.springframework.stereotype.Service;

import javax.annotation.Resource;
import java.util.List;
import java.util.Optional;

@Service
public class DistrictService {
    @Resource
    private DistrictMapper districtMapper;

    public Optional<Pager<District>> find(String name, Integer page, Integer size) {

        // 1.查询数据库
        // 1.1 查询总记录数
        Long total = districtMapper.getTotal(name);
        // 1.2 根据total判断查询结果
        Optional<Pager<District>> optionalPager = Optional.empty();
        if (total > 0) {
            // 封装分页数据
            Pager<District> pager = new Pager<>();
            List<District> districts = districtMapper.find(name, (page - 1) * size, size); // 注意开始行的处理
            pager.setPage(page);
            pager.setSize(size);
            pager.setTotal(total);
            pager.setList(districts);

            optionalPager = Optional.of(pager);
        }
        return optionalPager;
    }
}

5.controller(控制器层)

package com.springboot.controller;

import com.springboot.domian.CustomType;
import com.springboot.domian.District;
import com.springboot.domian.Pager;
import com.springboot.service.DistrictService;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;

import javax.annotation.Resource;
import java.util.Optional;

/**
 * @classDesc: 控制器
 * @author: Vipin Zheng
 * @createDate: 2018-05-06 19:55:38
 * @version: v1.0
 */
@RestController
@RequestMapping("/api")
public class DistrictController {

    @Resource
    private DistrictService districtService;

    @RequestMapping(value = "/find.do", method = RequestMethod.POST)
    public ResponseEntity<?> find(@RequestParam("name") String name,
                                  @RequestParam("page") Integer page,
                                  @RequestParam("size") Integer size) {
        // ---------------------- 调试数据 ----------------------
        System.out.println("关键字：" + name);
        System.out.println("当前页：" + page);
        System.out.println("每页条数：" + size);
        // ---------------------- 调试数据 ----------------------

        CustomType customType = new CustomType(400, "查无此数据！");
        Optional<Pager<District>> optionalPager =
                districtService.find(name, page, size);
        if (optionalPager.isPresent()) {
            customType.setCode(200);
            customType.setResult(optionalPager.get());
        }
        return ResponseEntity.ok(customType);
    }
}

6.前端页面

district.html

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>laypage 分页</title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="lib/layui/css/layui.css">
</head>

<body>
<div class="layui-container">
    <h1 style="text-align: center;">区县表</h1>
    <form class="layui-form" style="text-align: center;margin-top: 20px">
        <div class="layui-form-item">
            <!-- 查询条件 -->
            <div class="layui-inline">
                <label class="layui-form-label" style="display: none">查询条件：</label>
                <div class="layui-input-inline">
                    <input type="text" placeholder="请输入关键字..." class="layui-input" id="name">
                </div>
            </div>
            <!-- 题目 -->
            <!-- 提交按钮 -->
            <div class="layui-inline">
                <div class="layui-input-inline">
                    <button type="button" class="layui-btn" style="margin-bottom: 4px"
                            οnclick="getInfoToPage()">查询
                    </button>
                </div>
            </div>
            <!-- 提交按钮 -->
        </div>
    </form>
    <table class="layui-table">
        <thead>
        <tr>
            <th>did</th>
            <th>dname</th>
            <th>cname</th>
            <th>pname</th>
            <th>postcode</th>
            <th>areacode</th>
            <th>orderid</th>
        </tr>
        </thead>
        <!--分页数据盛放器-->
        <tbody></tbody>
        <!---------------->
    </table>
    <!--分页容器-->
    <div id="page" style="text-align:right"></div>
    <!----------->
</div>

<script src="js/jquery.2.1.4.min.js"></script>
<script src="lib/layui/layui.js"></script>
<script>
    let page = 1;                   // 当前页数，初始值设为 1
    let size = 10;                  // 每页条数，初始值设为 10
    let total;                      // 总记录数

    $(window).on('load', () => {
        // 初始化加载数据
        getInfoToPage();
    });

    function getInfoToPage() {
        getInfo();  // 获取数据
        toPage();   // 进行分页
    }

    // 查询脚本
    function getInfo() {
        $.ajax({
            type: "post",
            url: "/api/find.do",
            async: false,// 设置同步请求，加载数据前锁定浏览器
            dataType: 'json',
            data: {
                "name": $('#name').val(),   // 查询关键字
                "page": page,               // 查询页码
                "size": size,               // 每页条数
            },
            success: (data) => {
                // 当前查询无数据时
                if (data.code == 400) {
                    $("tbody").html("<tr style='color: red;text-align: center'><td colspan='7'>查无数据！</td></tr>");
                    return;
                }

                // 1.清空原数据
                $("tbody").html("");

                // 2.重新赋值页码、条数、总记录数
                page = data.result.page;
                size = data.result.size;
                total = data.result.total;

                // 3.渲染数据
                let text = ``;
                $.each(data.result.list, (i, item) => {
                    text += `
                    <tr>
                        <th>${item.did}</th>
                        <th>${item.dname}</th>
                        <th>${item.city.cname}</th>
                        <th>${item.city.province.pname}</th>
                        <th>${item.postcode}</th>
                        <th>${item.city.areacode}</th>
                        <th>${item.city.province.orderid}</th>
                    </tr>
                     `;
                });
                $("tbody").html(text);
            }
        });
    }

    // 分页脚本
    function toPage() {
        layui.use('laypage', function () {
            let laypage = layui.laypage;
            // 调用分页
            laypage.render({
                // 分页容器的id
                elem: 'page',// *必选参数
                // 数据总数，从服务端得到
                count: total,// *必选参数
                // 每页显示的条数。laypage将会借助 count 和 limit 计算出分页数。
                //limit:limit,
                // 起始页
                //curr:page,
                // 连续出现的页码个数
                //groups:5,
                // 自定义每页条数的选择项
                limits: [10, 25, 50, 100],
                // 自定义首页、尾页、上一页、下一页文本
                first: '首页',
                last: '尾页',
                prev: '<em><<</em>',
                next: '<em>>></em>',
                // 自定义主题
                theme: "#FF5722",
                // 自定义排版
                layout: ['count', 'prev', 'page', 'next', 'limit', 'skip'],
                // 渲染数据
                jump: function (data, first) {
                    // data包含了当前分页的所有参数
                    page = data.curr;
                    size = data.limit;
                    getInfo();
                }
            });
        })
    }
</script>
</body>
</html>

7.其他

# server
server:
  port: 8086
  servlet:
    context-path:

# spring
spring:
  ## 数据源
  datasource:
    driver-class-name: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://localhost:3306/interview?useSSL=false&serverTimezone=Asia/Shanghai
    username: root
    password: root
  ## 彩色日志
  output:
    ansi:
      enabled: always

# mybatis
mybatis:
  type-aliases-package: com.springboot.domian
  mapper-locations: mybatis/mapper/*.xml

PS：

• 项目启动后访问路径：localhost：8086/district.html
• 完整项目下载链接：https://download.csdn.net/download/zhengvipin/10396098
• laypage相关插件官网：http://www.layui.com/