Custom parameters for bootstrap-table server side pagination

Question

I have a service created with spring boot, for which I am trying to display its data using the bootstrap-table library.

My service allows pagination with the query parameters ?page=x&size=y, where page starts at 0.

The response for the query returns something that looks like this:

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

Where _embedded.catalogueOrders contains all the data, and page contains the totals.

I tried configuring my table as following:

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

This is able to retrieve and display the data, however it returns all the results, clearly due to it not knowing how to apply the pagination. Total elements doesn't seem to be retrieved either, as the table displays Showing 1 to 5 of undefined rows. Also, if I replace the responseHandler with dataField: '_embedded.catalogueOrders', it's no longer displaying the data.

How do I configure the query parameters needed for pagination?

And am I doing anything wrong when I try and configure dataField and totalField?

Answer 1

Figured it out:

Not sure what was wrong with the dataField and totalField, but it seems to not work with nested fields. To resolve this, I formatted the response into a new object inside responseHandler:

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

As for the query parameters, by default, bootstrap-table provides the parameters limit and offset. To customize that and convert to size and page like in my case, the queryParams function can be provided:

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