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

Question

我有一个用spring boot创建的服务，我正试图为其使用 引导表 库。

我的服务允许通过查询参数 ?page=x&size=y，其中 page 从0开始。

查询的响应返回的内容是这样的。

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

Where _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?

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):
}

你可以在网上找到大量的信息。