SpringBoot下dataTable分页实现

最新推荐文章于 2024-09-09 15:42:45 发布

原创最新推荐文章于 2024-09-09 15:42:45 发布 · 2.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#springBoot #dataTable #mysql #分页

springboot 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了在SpringBoot项目中，如何利用dataTable进行高效真实的分页查询，避免前端假分页导致的性能问题。内容包括：前端js代码设置，开启后端请求，设置分页参数；Java Controller中处理分页请求，使用TableRequest对象解析参数；服务端根据参数进行数据库查询，计算总记录数，并返回分页数据；以及Mybits配置文件中定制SQL语句，实现分页和排序。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

dataTable的分页可以前端实现，但是前端实现的分页是假分页（从后台获取所有数据，再缓存分页处理），这样做确实方便开发，但是随着数据量逐渐增大，查询的消息越来越低，每次都在查询的时候卡住几秒。所以假分页相当不实用了。

在分页前，自己做了一个简单的分页数据量查询测试，分页数据在100条以内的查询效率几乎无感，分页数据在100-1000条的查询消息逐渐慢了下来。进行数据库大量查询时，可以对数据进行分页查询（10000条数据查询100次100条比一次性查询10000条数据快）。

dataTable分页实现：

网页代码如下，随便写的，不用在意显示的是什么。

  <div class="box box-primary no-border">
        <div class="box-header no-border" style="margin-bottom: -10px;">
        </div>
        <div class="box-body">
            <table class="table table-bordered dataTable display aoTable" style="font-size: 12px;width: 100%;">
                <thead>
                <tr>
                    <th>id</th>
                    <th>userId</th>
                    <th>password</th>
                    <th>nickname</th>
                    <th>avarUrl</th>
                 </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </div>

js代码如下，dataTable的基本属性网上能够查询到，最重要的是bServerSide:true开始后端请求，fnServerData:发送请求的时候执行的是如下方法。sAjaxSource：发送请求的短链接，这样我们就能把分页需要的部分数据发送到后台。

(function (ele) {

    var table = ele.find('.dataTable').dataTable({
        'bServerSide': true,
        bLengthChange: false, //支持变更页面显示数据行数
        bPaginate: true,  //显示翻页按钮
        "ordering": false,
        "iDisplayLength": 50,
        "fnServerData": function (sSource, aoData, fnCallback) {
            $.ajax({
                "type": 'post',
                "url": sSource,
                "dataType": "json",
                "data": {
                    "aoData": JSON.stringify(aoData)
                }
                , "success": function (resp) {
                    fnCallback(resp);
                }
            });
        }, "sAjaxSource": app.path + "/get/userList",
        "aoColumns": [{
            "mData": "startTime"
        }, {
            "mData": "endTime"
             
        }]});}
        );

Java代码：

在Contorller中短链接请求参数中需要加上如下图所示的代码，注意：这里的TableRequest是封装好的一个请求，通过Converter将String字符串转换成了对象。aaData实际上是一个Json字符串，可以打印出来查看，这里不在详细讲述，一般只需要取出4个参数就行实现后端分页。

iDisplayLength：该页显示的数据条数

sEcho：请求的次数

iDisplayStart:开始的位置

searchMap:查询条件，可以多条件查询

service代码如下:

从tableRequest取出数据，分页查询数据库返回结果集。计算一下user的总数。将数据封装到Map中。这里需要注意的是:按照字面意思itotalRecords确实是应该放总查询数据量，iTotalDisplayRecords为当前页要展示的数据量。而实际的使用过程中，这两个数据应该是反了过来（em.......）。不知道是不是我的理解有问题～反正只有这样操作才正确。返回的结果是一个字符串，js代码可以识别result的参数并进行相应的配置。

        Integer start = tableRequest.getiDisplayStart();
        Integer limit = tableRequest.getiDisplayLength();
        List<User> list = userMapper.selectByMark(tableRequest.getSearchMap(), start, limit);
        //计算总数
        int totalCount = userMapper.count();
        Map<String, Object> result = new HashMap<>();
        result.put("aaData",list);
        result.put("iTotalDisplayRecords",totalCount);
        result.put("iTotalRecords",list.size());
        result.put("sEcho",tableRequest.getsEcho());
        return JSONObject.toJSONString(result);

Mybits配置文件的Sql语句：写的一个简单的sql ，可以根据自己的需求进行相应的变化，排序可以在这里先排序好。

select * from `user` order by id limit #{start},#{limit}。这种sql支持的数据量不太，数据量越大越慢。