Пользовательские параметры для нумерации страниц на стороне сервера bootstrap - PullRequest
Новая
       95

Пользовательские параметры для нумерации страниц на стороне сервера bootstrap

3 голосов
/ 09 мая 2020

У меня есть служба, созданная с помощью 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?

Ответы [ 2 ]

2 голосов
/ 12 мая 2020

Разобрался:

Не уверен, что не так с 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
    }
}
0 голосов
/ 13 мая 2020

один, да, с вложенными полями не работает. если вы хотите использовать вложенные поля, попробуйте код sass (получите компилятор, просто выполните поиск в Интернете, в сети много сообщений). во-вторых, я не совсем уверен, о чем вы говорите, но вы можете настроить css переменную 

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

/*apply variables

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

, вы можете найти множество информации об этом в Интернете.

...