springboot使用Mybatis的分页插件与datatable.js数据交互

1. pom需要的依赖

<dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
            <exclusions>
                <exclusion>
                    <groupId>org.springframework.boot</groupId>
                    <artifactId>spring-boot-starter-logging</artifactId>
                </exclusion>
            </exclusions>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-log4j</artifactId>
            <version>1.3.8.RELEASE</version>
        </dependency>
        <!--mybatis依赖-->
        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>2.0.0</version>
        </dependency>
        <dependency>
            <groupId>com.github.pagehelper</groupId>
            <artifactId>pagehelper-spring-boot-starter</artifactId>
            <version>1.2.3</version>
        </dependency>
        <!--数据库依赖-->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <scope>runtime</scope>
        </dependency>
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>druid</artifactId>
            <version>1.1.14</version>
        </dependency>

        <!--单元测试依赖-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
        <!-- tomcat支持 -->
        <dependency>
            <groupId>org.apache.tomcat.embed</groupId>
            <artifactId>tomcat-embed-jasper</artifactId>
            <!--<scope>provided</scope>-->
        </dependency>
        <!-- jstl标签库 -->
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>jstl</artifactId>
        </dependency>
        <!--json-->
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>fastjson</artifactId>
            <version>1.2.55</version>
        </dependency>


    </dependencies>

只需要其中的 pagehelper-spring-boot-starter 依赖，其余依赖是项目需要，大家随意导入。

2. 封装一个分页工具类，提供一个比较全的

package com.it.wms.utils;

import javax.servlet.http.HttpServletRequest;
import java.util.List;

/**
 * @Author: ld
 * @Description:
 * @Dtate:Create in 22:122019/3/21
 */
public class PageUtil<T> {

    private int draw; // 第几次请求
    private int start = 0;// 起止位置
    private int length = 100; // 数据长度
    private String search;
    private boolean is_search;
    private int[] order;
    private String order_dir;
    private String columns_data;
    private String columns_name;
    private String columns_searchable;
    private boolean is_orderable;
    private String columns_search_value;
    private boolean is_search_regex;
    private int recordsTotal;
    private int recordsFiltered;
    private List<T> data;
    private String error;
    private String dt_rowId;
    private String dt_rowClass;
    private Object dt_rowData;
    private Object dt_rowAttr;
    private int page_num = 1;
    private int page_size = 100;


    public PageUtil() {

    }

    public PageUtil(HttpServletRequest request) {
        //开始的数据行数
        String start = request.getParameter("start");
        //每页的数据数
        String length = request.getParameter("length");
        //DT传递的draw:
        String draw = request.getParameter("draw");

        this.setStart(Integer.parseInt(start));
        this.setLength(Integer.parseInt(length));
        this.setDraw(Integer.parseInt(draw));
        //计算页码
        this.page_num = (Integer.parseInt(start) / Integer.parseInt(length)) + 1;

    }

    public int getDraw() {
        return draw;
    }

    public void setDraw(int draw) {
        this.draw = draw;
    }

    public int getStart() {
        return start;
    }

    public void setStart(int start) {
        this.start = start;
    }

    public int getLength() {
        return length;
    }

    public void setLength(int length) {
        this.length = length;
    }

    public String getSearch() {
        return search;
    }

    public void setSearch(String search) {
        this.search = search;
    }

    public boolean isIs_search() {
        return is_search;
    }

    public void setIs_search(boolean is_search) {
        this.is_search = is_search;
    }

    public int[] getOrder() {
        return order;
    }

    public void setOrder(int[] order) {
        this.order = order;
    }

    public String getOrder_dir() {
        return order_dir;
    }

    public void setOrder_dir(String order_dir) {
        this.order_dir = order_dir;
    }

    public String getColumns_data() {
        return columns_data;
    }

    public void setColumns_data(String columns_data) {
        this.columns_data = columns_data;
    }

    public String getColumns_name() {
        return columns_name;
    }

    public void setColumns_name(String columns_name) {
        this.columns_name = columns_name;
    }

    public String getColumns_searchable() {
        return columns_searchable;
    }

    public void setColumns_searchable(String columns_searchable) {
        this.columns_searchable = columns_searchable;
    }

    public boolean isIs_orderable() {
        return is_orderable;
    }

    public void setIs_orderable(boolean is_orderable) {
        this.is_orderable = is_orderable;
    }

    public String getColumns_search_value() {
        return columns_search_value;
    }

    public void setColumns_search_value(String columns_search_value) {
        this.columns_search_value = columns_search_value;
    }

    public boolean isIs_search_regex() {
        return is_search_regex;
    }

    public void setIs_search_regex(boolean is_search_regex) {
        this.is_search_regex = is_search_regex;
    }

    public int getRecordsTotal() {
        return recordsTotal;
    }

    public void setRecordsTotal(int recordsTotal) {
        this.recordsTotal = recordsTotal;
    }

    public int getRecordsFiltered() {
        return recordsFiltered;
    }

    public void setRecordsFiltered(int recordsFiltered) {
        this.recordsFiltered = recordsFiltered;
    }

    public List<T> getData() {
        return data;
    }

    public void setData(List<T> data) {
        this.data = data;
    }

    public String getError() {
        return error;
    }

    public void setError(String error) {
        this.error = error;
    }

    public String getDt_rowId() {
        return dt_rowId;
    }

    public void setDt_rowId(String dt_rowId) {
        this.dt_rowId = dt_rowId;
    }

    public String getDt_rowClass() {
        return dt_rowClass;
    }

    public void setDt_rowClass(String dt_rowClass) {
        this.dt_rowClass = dt_rowClass;
    }

    public Object getDt_rowData() {
        return dt_rowData;
    }

    public void setDt_rowData(Object dt_rowData) {
        this.dt_rowData = dt_rowData;
    }

    public Object getDt_rowAttr() {
        return dt_rowAttr;
    }

    public void setDt_rowAttr(Object dt_rowAttr) {
        this.dt_rowAttr = dt_rowAttr;
    }

    public int getPage_num() {
        return page_num;
    }

    public void setPage_num(int page_num) {
        this.page_num = page_num;
    }

    public int getPage_size() {
        return page_size;
    }

    public void setPage_size(int page_size) {
        this.page_size = page_size;
    }
}

3. controller

 @RequestMapping("/storage/list")
    @ResponseBody
    public Object list(StoragePo storagePo,Integer start, Integer length, Integer draw){

        PageHelper.startPage(
                (start/ length) + 1,
                length);
        List<StorageLocationCountReport> list = storageService.findStorage(storagePo);

        //用PageInfo对结果进行包装
        PageInfo<StorageLocationCountReport> pageInfo = new PageInfo<StorageLocationCountReport>(list);
        //使用DataTables的属性接收分页数据
        PageUtil<StorageLocationCountReport> dataTable = new PageUtil<StorageLocationCountReport>();

        //封装数据给DataTables
        dataTable.setDraw(draw);
        dataTable.setData(pageInfo.getList());
        dataTable.setRecordsTotal((int) pageInfo.getTotal());
        dataTable.setRecordsFiltered(dataTable.getRecordsTotal());
        //返回数据到页面

        return JSON.toJSON(dataTable);
    }

StoragePo 自己的实体类，用于条件查询，start 分页开始的页数，length 分页的大小，draw 请求的次数datatable要求的参数；
PageHelper.startPage((start/ length) + 1, length); 为分页插件设置起始页和每页大小；
List list = storageService.findStorage(storagePo); 调用业务条件查询，返回list集合；
PageInfo pageInfo = new PageInfo(list); 将list集合封装到Pageinfo中，PageInfo是分页插件提供的；
PageUtil dataTable = new PageUtil(); 创建pageUtil对象，用于封装分页相关数据；

4. service

 @Override
    public List<StorageLocationCountReport> findStorage(StoragePo storagePo) {
        List<StorageLocationCountReport> storageList = storageLocationCountReportExampleMapper.findStorage(storagePo);
        return storageList;
    }

service就是一个查询的方法，StoragePo 对象封装的是查询的条件；

5. jsp

<%--
  Created by IntelliJ IDEA.
  User: 42262
  Date: 2019/3/15
  Time: 16:32
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<html>
<head>
    <title>Title</title>
    <link href="${ctx}/bootstrap-3.3.7-dist/css/bootstrap.css" rel="stylesheet" type="text/css" />
    <link href="${ctx}/css/index.css" rel="stylesheet" type="text/css" />

    <link rel="stylesheet" href="${ctx}/laydate/theme/default/laydate.css" type="text/css" />
    <link rel="stylesheet" href="${ctx}/css/datatable.css"/>
</head>
<body>

<div class="page-content container-fluid">
    <div class="row">
        <div class="col-md-12">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h3 class="panel-title">搜索栏</h3>
                </div>
                <div class="panel-body container-fluid">
                    <form class="form-horizontal" id="searchForm"
                          action="${ctx}/report/storage/export" method="post">
                        <div class="row">
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">仓库<%--<span style="color: red;">*</span>--%>:</label>
                                    <div class="col-sm-10">
                                        <select class="form-control required col-sm-12" id="warehouseCode" name="warehouseCode"
                                                onchange="ajaxSelWarehouse(this,'customerCode');">
                                            <c:forEach items="${warehouseMap}" var="warehouse">
                                                <option value="${warehouse.key}">${warehouse.value}</option>
                                            </c:forEach>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">商家<%--<span style="color: red;">*</span>--%>:</label>
                                    <div class="col-sm-10">
                                        <select class="form-control" id="customerCode" name="customerCode">
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">货主:</label>
                                    <div class="col-sm-10">
                                        <input type="text" class="form-control" id="ownerCode" name="ownerCode" >
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6 text-left">
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">日期:</label>
                                    <div class="col-sm-10">
                                        <div class="input-group">
                                            <input class="form-control" id="beginDate" name="beginDate" type="text" lay-key="5">
                                            <span class="input-group-addon">到</span>
                                            <input class="form-control" id="endDate" name="endDate" type="text" lay-key="6">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="input-textgroup col-sm-12">
                                    <button type="button" class="btn btn-info" id="query">查询</button>
                                    <input type="submit" class="btn btn-info" id="exportBtn" value="导出"/>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <div class="panel panel-primary">
        <div class="panel-heading">
            <h3 class="panel-title">储位统计信息</h3>
            <div class="panel-actions">
                <a class="panel-action icon wb-expand"
                   data-toggle="panel-fullscreen" aria-hidden="true"></a>
            </div>
        </div>
        <div class="panel-body container-fluid">
            <div class="tabs-contents" id="tabs-contents">
                <!-- tab1内容区域 -->
                <div class="tab-content active">
                    <table id="table-packmat"
                           class="table table-striped table-bordered table-condensed">
                        <thead>
                        <tr class="text-center">
                            <th>仓库</th>
                            <th>商家</th>
                            <th>货主</th>
                            <th>储位类型</th>
                            <th>数量</th>
                            <th>日期</th>
                        </tr>
                        </thead>
                        <tbody id="table-packmat-body">
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    window.ctx = "${ctx}";
</script>
<script src="${ctx}/js/jquery.js"></script>
<script src="${ctx}/laydate/laydate.js"></script>
<script src="${ctx}/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
<script src="${ctx}/js/jquery-validation.js"></script>
<script src="${ctx}/js/jquery_datatables.js"></script>
<script src="${ctx}/js/moment.js"></script>
<script src="${ctx}/js/dataTables.responsive.min.js"></script>


<script src="${ctx}/js/export.js"></script>



</body>
</html>

这是我的jsp页面，其中包含了一些js，需要自己去下载，然后导入，其中export.js是我自己的js
6. js

var tables=null;


$(function() {


    $("#query").click(function () {
       initable();
    });

    /*
    * 分页数据渲染表格
    * */
    function initable() {

        tables = $('#table-packmat').DataTable({
            language: {
                "sProcessing":   "加载中...",
                "sZeroRecords":  "没有匹配结果",
                "sInfo":         "当前显示第 _START_ 至 _END_ 条，共 _TOTAL_ 条",
                "sInfoEmpty":    "当前显示第 0 至 0 条，共 0 条",
                "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
                "sInfoPostFix":  "",
                "sSearch":       "搜索:",
                "sUrl":          "",
                "sEmptyTable":     "表中数据为空",
                "sLoadingRecords": "载入中...",
                "sInfoThousands":  ",",
                "oPaginate": {
                    "sFirst":    "首页",
                    "sPrevious": "上页",
                    "sNext":     "下页",
                    "sLast":     "末页",
                    "sJump":     "跳转"
                },
                "oAria": {
                    "sSortAscending":  ": 以升序排列此列",
                    "sSortDescending": ": 以降序排列此列"
                },
                "sLengthMenu":   "每页显示 _MENU_ 条"
            },
            destroy: true,
            retrieve:true,
            autoWidth: true,   //禁用自动调整列宽
            stripeClasses: ["odd", "even"],//为奇偶行加上样式，兼容不支持CSS伪类的场合
            order: [],          //取消默认排序查询,否则复选框一列会出现小箭头
            processing: true,  //隐藏加载提示,自行处理
            serverSide: true,   //启用服务器端分页
            searching: false,    //禁用原生搜索
            ajax: {
                url: ctx+'/report/storage/list',
                type: 'POST',
                data : function ( data ) {
                    //添加额外的参数传给服务器
                    data.warehouseCode = $("#warehouseCode").val();
                    data.customerCode = $("#customerCode").val();
                    data.ownerCode = $("#ownerCode").val();
                    data.beginDate = $("#beginDate").val();
                    data.endDate = $("#endDate").val();
                }
            },
            columns: [
                {data: "warehouseCode"},
                {data: "customerCode"},
                {data: "ownerCode"},
                {
                    data: "storageLocationType",
                    render: function (data) {
                        if(data=='TRAY'){
                            return "托盘";
                        }
                        return data;
                    }
                },
                {data: "countNum"},
                {
                    "data": "saveDate",
                    render: function (data) {
                        return moment(data).format("YYYY年MM月DD h:mm:ss");
                    }
                }
            ]
        });

        tables.ajax.reload();

    }

})

具体的参数我就不说了，datatable的文档自己去看，要是想使用的话，只需要修改以下的参数就行了:
ajax: {
url: ctx+’/report/storage/list’, /提交的地址/
type: ‘POST’,
data : function ( data ) {
//添加额外的参数传给服务器
data.warehouseCode = $("#warehouseCode").val();
data.customerCode = $("#customerCode").val();
data.ownerCode = $("#ownerCode").val();
data.beginDate = $("#beginDate").val();
data.endDate = $("#endDate").val();
}
},
需要修改提交地址以及需要条件查询的参数。。。
columns: [
{data: “warehouseCode”},
{data: “customerCode”},
{data: “ownerCode”},
{
data: “storageLocationType”,
render: function (data) {
if(data==‘TRAY’){
return “托盘”;
}
return data;
}
},
{data: “countNum”},
{
“data”: “saveDate”,
render: function (data) {
return moment(data).format(“YYYY年MM月DD h:mm:ss”);
}
}
]
需要修改返回的参数，也就是list集合里面对象的属性名。
{
data: “storageLocationType”,
render: function (data) {
if(data==‘TRAY’){
return “托盘”;
}
return data;
}
},
这种方式是修改属性显示的值，意思就是storageLocationType属性如果是’TRAY‘就显示 ‘托盘’
{data: “countNum”},
{
“data”: “saveDate”,
render: function (data) {
return moment(data).format(“YYYY年MM月DD h:mm:ss”);
}
}
此处是将日期格式化显示，利用的是moment.js实现的；
按照步骤去做，实现出来应该不难！

Ending。。。