Bootstrap Table后台分页（Java）

最新推荐文章于 2025-05-26 16:42:37 发布

原创最新推荐文章于 2025-05-26 16:42:37 发布 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrape table后台分页

Java基础知识专栏收录该内容

28 篇文章

订阅专栏

本文介绍了如何将Bootstrap Table的前台分页改为后台分页，以提升用户体验。在前端，设置表格查询参数如起始数据和查询数量。后端Controller接口需接收这些参数，并返回Map数据，包含数据列表（rows）和总条数（total）。示例中，使用Java实现，通过MySQL的limit进行数据分页。

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

由于维护的功能模块数据量较大，所以尝试把前台分页改为后台分页，提升用户体验。

首先，在table加载的时候就需要指定我们必需的参数，例如：从哪一条数据开始，一次查询多少条数据，还可以附加一些定制化的参数。让表格的查询带着参数访问后台，示例如下：

//初始化Table
    $table.bootstrapTable({
        url: contextPath + "后台URL"
        toolbar: "#toolbar",
        method: 'get',
        showExport: true,
        uniqueId: 'id',
        exportDataType: "all",
        showColumns: true,
        showRefresh: true,
        exportOptions: {
            fileName: '模块名称',
            ignoreColumn: [0],
            tableName: '模块名称',
            type: 'excel', // 'csv', 'txt', 'sql', 'json', 'xml', 'excel', 'doc', 'png' or 'pdf'
            worksheetName: 'Sheet1'
        },
        sidePagination: 'server',
        pageSize: 10,
        pageNumber: 1,
        pagination: "true",
        pageList: "[10,20,50,100,200,300,400,500,600,700,800]",
        queryParamsType: '',
        sortName: 'usageStartTime',
        sortOrder: 'desc',
        queryParams: queryParams,
        columns: columns
    });


//表格加载参数
function queryParams(params) {
    return {
        //必传
        offset: params.pageNumber,
        limit: params.pageSize,
        //定制化的参数，可传可不传
        billCycle: $("#billCycle").val(),
        uniformProductName: $('#productName option:selected') .val()
    }
}

前台写完了，那就编写后台Controller层的接口吧，需要注意的是，后台接口的参数必须满足接收前台所有的定制化参数，我在前台有两个定制化的参数，示例如下：

    @RequestMapping("/后台URL.json")
    public @ResponseBody
    Map<String, Object> consumer_flow(Integer offset, Integer limit, String billCycle, String uniformProductName) {
        Map mapPage = new HashMap();
        try {
            MyModel request = new MyModel ();
            request.setBillCycle(("").equals(billCycle) ? null : billCycle);
            request.setUniformProductName(("").equals(uniformProductName) ? null : uniformProductName);
            request.setOffset(offset);
            request.setLimit(limit);
            ListResult<MyModel> bills = myService.listPage(request);
            mapPage.put("rows", bills.getData());
            request.setOffset(null);
            request.setLimit(null);
            PlainResult<Integer> total = myService.listCount(request);
            mapPage.put("total", total.getData());
        } catch (Exception e) {
            e.printStackTrace();
        }
        return mapPage;
    }

另外需要注意的就是，后台返回给前台表格的结果集必须是Map格式的，里面有两个Key，分别为“rows”、“total”，其中“rows”用来存放数据，“total”用来存放全部数据总条数。