spring boot+layui分页实战

项目用了layui，做了个简单的图书搜索页，分享出来。

喜欢的朋友给点个赞！！！

实现效果

开发步骤

1.前端页面和JS

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>搜索图书</title>

    <link rel="stylesheet" href="/static/layui/css/layui.css" th:href="@{/static/layui/css/layui.css}">

    <style type="text/css">
       省略...
    </style>
</head>
<body>
<div class="main">
    <h1 class="site-h1"><i class="layui-icon"></i>Bookman图书检索</h1>
    <form class="layui-form">
        <div class="layui-form-item">
            <div class="input-opt">
                <select name="condition" lay-verify="required">
                    <option value="isbn">ISBN号</option>
                    <option value="author">作者</option>
                    <option value="name">名称</option>
                </select>
            </div>
            <div class="input-text">
                <input type="text" name="keyword" required lay-verify="required" placeholder="请输入" autocomplete="off"
                       class="layui-input">
            </div>

        </div>

        <div class="layui-form-item">
            <button class="layui-btn layui-btn-submit" lay-submit="" lay-filter="formDemo">搜索</button>
        </div>
    </form>

    <!-- 列表 -->
    <div class="booklist">
        <table class="items">
        </table>
        <!--分页-->
        <div id="pager"></div>
    </div>
</div>

<script src="/static/js/jquery-1.11.3.min.js" th:src="@{/static/js/jquery-1.11.3.min.js}"></script>
<script src="/static/layui/layui.js" th:src="@{/static/layui/layui.js}"></script>

<!--ctx-->
<script th:replace="~{fragment::ctx}"/>

<script>
    var form, laypage;
    // 请求参数
    var param = {};

    layui.use(['form','laypage','jquery'], function () {
        form = layui.form;
        laypage = layui.laypage, $ = layui.$;

        //监听提交
        form.on('submit(formDemo)', function (data) {
            param.name = "";
            param.isbn = "";
            param.author = "";

            if (data.field.condition == "isbn") {
                param.isbn = data.field.keyword;
            }
            if (data.field.condition == "name") {
                param.name = data.field.keyword;
            }
            if (data.field.condition == "author") {
                param.author = data.field.keyword;
            }

            showRecord(1,5,param);

            return false;
        });
    });

    function showRecord(pageNo, pageSize, param) {
        $.get(ctx+"api/book/list",
            {
                author: param.author,
                name: param.name,
                isbn: param.isbn,
                page: pageNo,
                limit: pageSize
            },
            function (result) {
                // 展示数据
                fillPage(pageNo, pageSize, result.data);
                // 渲染分页
                laypage.render({
                    elem: $('#pager')
                    ,count: result.count            //数据总数，从服务端得到
                    , limit: 5                      //每页显示条数
                    , limits: [5, 10, 15]
                    , curr: 1                        //起始页
                    , groups: 5                      //连续页码个数
                    , prev: '上一页'                 //上一页文本
                    , netx: '下一页'                 //下一页文本
                    , first: 1                      //首页文本
                    , last: 100                     //尾页文本
                    , layout: ['prev', 'page', 'next','limit','skip']
                    //跳转页码时调用
                    , jump: function (obj, first) { //obj为当前页的属性和方法，第一次加载first为true
                        //非首次加载 do something
                        if (!first) {
                            //调用加载函数加载数据
                            getPage(obj.curr,obj.limit,param);
                        }
                    }
                });
            }
        );
    }

    function getPage(pageNo, pageSize, param) {
        var result1;
        $.get(ctx+"api/book/list",
            {
                author: param.author,
                name: param.name,
                isbn: param.isbn,
                page: pageNo,
                limit: pageSize
            },
            function (result) {
                fillPage(pageNo, pageSize, result.data);
            }
        );
    }

    function fillPage(pageNo, pageSize, data) {
        var start=pageNo==1?1:(pageNo-1)*pageSize+1;
        $('.items').empty();
        //加载后台返回的List集合数据
        var href="";
        for (var i = 0; i < data.length; i++) {
            href=ctx+"bookDetail/"+data[i].id;
            var td = $("<td class='col1'></td>").text(start+i);
            var td2 = $("<td class='cover'><a href='"+href+"' target='_blank'><img src='static/img/nopic.png'></a></td>");
            var td3 = $("<td class='col2'></td>");
            var div = $("<div class='itemtitle'><a href='"+href+"' target='_blank'>"+data[i].name+"</a></div>");
            var tb = $("<table><tr><td class='label1'>作者：</td><td class='content'>"+data[i].author+"</td>" +
                "<td class='label1'>ISBN：</td><td class='content'>"+data[i].isbn+"</td></tr></table>")
            td3.append(div,tb);
            var tr = $("<tr class='item'></tr>").append(td, td2, td3);

            $('.items').append(tr);
        }
    }

</script>
</body>
</html>

2.数据层

<select id="count" parameterType="Map" resultType="java.lang.Integer">
        select count(*) from tb_book
        <where>
            <if test="isbn!=null and isbn!=''">
                and isbn = #{isbn}
            </if>
            <if test="name!=null and name!=''">
                and name like concat('%',#{name},'%')
            </if>
            <if test="author!=null and author!=''">
                and author like concat('%',#{author},'%')
            </if>
        </where>
    </select>

<select id="selectPageResult" parameterType="map" resultType="com.laoxu.java.bookman.model.Book">
        select *
        from tb_book
        <where>
            <if test="isbn!=null and isbn!=''">
                and isbn = #{isbn}
            </if>
            <if test="name!=null and name!=''">
                and name like concat('%',#{name},'%')
            </if>
            <if test="author!=null and author!=''">
                and author like concat('%',#{author},'%')
            </if>
        </where>
        limit #{offset}, #{rows}
    </select>

3.服务层

package com.laoxu.java.bookman.service;

import com.laoxu.java.bookman.framework.AbstractService;
import com.laoxu.java.bookman.model.Book;
import org.springframework.stereotype.Service;

import java.util.List;
import java.util.Map;

/**
 * @Description: 图书服务
 * @Author laoxu
 * @Date 2019/5/2 9:26
 **/
@Service
public class BookService extends AbstractService {
    public void add(Book entity) {
        //String username = SecurityUtil.getLoginUser();
        insert("bookMapper.insert",entity);
    }

    public void modify(Book entity) {
        update("bookMapper.update",entity);
    }

    public void remove(Long id) {
        delete("bookMapper.delete",id);
    }

    public void removes(Long[] ids) {
        delete("bookMapper.deletes",ids);
    }

    public Book get(Long id) {
        return selectOne("bookMapper.select",id);
    }

    public Book getByIsbn(String isbn) {
        return selectOne("bookMapper.selectByIsbn",isbn);
    }

    public List<Book> getParentList(Long id) {
        return selectList("bookMapper.selectParentList",id);
    }

    public int count(Map<String, Object> param) {
        return selectOne("bookMapper.count",param);
    }

    public List<Book> getList(Map<String, Object> param) {
        return selectList("bookMapper.selectList",param);
    }

    public List<Book> getPageResult(Map<String, Object> param) {
        return selectList("bookMapper.selectPageResult",param);
    }

    public int checkCode(Book entity){
        return selectOne("bookMapper.countCode",entity);
    }

}

4.控制层

@GetMapping("/list")
    public ResultBean<List<Book>> getPageResult(
            @RequestParam(required = false) String name,
            @RequestParam(required = false) String isbn,
            @RequestParam(required = false) String author,
            @RequestParam(defaultValue = "1") Integer page,
            @RequestParam(defaultValue = "10") Integer limit) {

        Map<String, Object> param = new HashMap<>();

        // 计算起始行号
        int offset = (page - 1) * limit;
        int rows = limit;

        param.put("name",name);
        param.put("isbn",isbn);
        param.put("author",author);
        param.put("offset", offset);
        param.put("rows", rows);

        // 统计记录数
        int totalRows = bookService.count(param);

        // 获取当前页结果集
        List<Book> entities = bookService.getPageResult(param);

        ResultBean result = new ResultBean(0, "查询成功", totalRows, entities);

        return result;

    }

5.数据格式参考

{
    "code": 0,
    "msg": "查询成功",
    "count": 1,
    "data": [{
        "id": 10,
        "createTime": "2020-01-12T11:22:49.000+0000",
        "creater": null,
        "updateTime": "2020-02-04T15:31:28.000+0000",
        "updater": null,
        "name": "大秦帝国",
        "isbn": "111",
        "categoryCode": "10",
        "categoryName": "K　历史、地理",
        "author": "孙皓晖",
        "publisherCode": "7-302",
        "publisherName": "清华大学出版社-北京",
        "price": 588,
        "edition": 1,
        "translator": "",
        "languageCode": "CH",
        "languageName": "汉语",
        "pages": 1200,
        "words": 5000000,
        "locationCode": "一号架",
        "locationName": "一号架",
        "totalNumber": 122,
        "leftNumber": 4,
    }]
}