bootstrap-table 服务器端分页的自定义参数

Question

我有一个使用 spring 引导创建的服务，我正尝试使用 bootstrap-table 库显示它的数据。

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

查询 returns 的响应如下所示：

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

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

我尝试按如下方式配置我的 table：

$('#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"]
    }
})

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

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

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

Answer 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
    }
}

Answer 2

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

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

/*apply variables

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

您可以在网上找到大量这方面的信息。

bootstrap-table 服务器端分页的自定义参数

Custom parameters for bootstrap-table server side pagination

javascript

html

jquery

bootstrap-table