引导表服务器端分页的自定义参数答案

【问题标题】：Custom parameters for bootstrap-table server side pagination引导表服务器端分页的自定义参数
【发布时间】：2020-08-24 16:09:42
【问题描述】：

我有一个使用 Spring Boot 创建的服务，我正在尝试使用 bootstrap-table 库来显示它的数据。

我的服务允许使用查询参数?page=x&size=y 进行分页，其中page 从0 开始。

查询的响应返回如下所示的内容：

{
  "_embedded": {
    "catalogueOrders": [ .... ]
  },
  "page": {
    "size": 20,
    "totalElements": 11,
    "totalPages": 1,
    "number": 0
  }
}

_embedded.catalogueOrders 包含所有数据，page 包含总计。

我尝试如下配置我的表：

$('#orderTable').bootstrapTable({
    url: "http://localhost:8088/catalogueOrders?orderStatus=" + orderState,
    columns: [
        {
            field: 'orderId',
            title: 'Order ID'
        },
        {
            field: 'priority',
            title: 'Priority'
        }
    ],
    pagination: true,
    sidePagination: 'server',
    totalField: 'page.totalElements',
    pageSize: 5,
    pageList: [5, 10, 25],
    responseHandler: function(res) {
        console.log(res)
        return res["_embedded"]["catalogueOrders"]
    }
})

这能够检索和显示数据，但是它返回所有结果，显然是因为它不知道如何应用分页。似乎也没有检索到总元素，因为表格显示Showing 1 to 5 of undefined rows。另外，如果我将responseHandler 替换为dataField: '_embedded.catalogueOrders'，则不再显示数据。

如何配置分页所需的查询参数？

当我尝试配置 dataField 和 totalField 时，我做错了吗？

【问题讨论】：

标签： javascript html jquery bootstrap-table

【解决方案1】：

想通了：

不确定dataField 和totalField 出了什么问题，但它似乎不适用于嵌套字段。为了解决这个问题，我将响应格式化为 responseHandler 内的一个新对象：

dataField: 'data',
totalField: 'total',
responseHandler: function(res) {
    return {
        data: res["_embedded"]["catalogueOrders"],
        total: res["page"]["totalElements"]
    }
}

关于查询参数，bootstrap-table默认提供limit和offset参数。要对其进行自定义并转换为size 和page，就像我的情况一样，可以提供queryParams 函数：

queryParams: function(p) {
    return {
        page: Math.floor(p.offset / p.limit),
        size: p.limit
    }
}

【讨论】：

【解决方案2】：

是的，它不适用于嵌套字段。如果您想使用嵌套字段，请尝试使用 sass 代码（获取编译器，只需在网上搜索，网上有很多帖子）。二，我不确定你在说什么，但你可以设置一个css变量

:root{
  /*assign variables*/
  —-color-1: red;
  —-color-2: blue;
}

/*apply variables

p {
  color: var(-—color-1):
}

您可以在网络上找到大量关于此的信息。

【讨论】：

在这种情况下 CSS 有什么帮助？