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,
   }]
}