UBOS Community

Vika
Vika

Posted on • Updated on

Create the server pagination

#serverpagination #paginationubos #skip #paginationmongobd

Коли нам потрібно відобразити дані, наприклад використовуючи віджет Table, нас виникає питання пагінації.
На платформі в налаштуваннях віджета ми можемо обрати пагінацію на боці UI, тоді ми забираємо одразу всю колекцію з BD і Table автоматично ділить її на сторінки.
Це має сенс коли документ невеликий, і це не буде впливати на швидкість опрацювання запиту.
Але коли ми очікуємо великі дані тут вже потрібно робити пагінацію на боці сервера і це досить просто реалізувати використовуючи UBOS.

Для цього нам знадобиться:

Крок перший:

Потрібно на Flow Builder UBOS зробити наступне:

  1. Cтворюємо flow використовуючи такіNODEs:
NODE INSTALL
Image description Basic NODE node-red 3.0.2
Image description Basic NODE node-red 3.0.2
Image description node-red-node-mongodb 0.2.5
Image description Basic NODE node-red 3.0.2
Image description Basic NODE node-red 3.0.2
Image description Basic NODE node-red 3.0.2

Image description

  1. Налаштовуємо NODEs:
    • function 8. Звертаємось в базу даних і виводимо Total items.

Image description

msg.payload={
    deleted: false
};

return msg;
Enter fullscreen mode Exit fullscreen mode
  • function 7.Звертаємось в базу даних використовуючи методи $skip та $limit для реалізації пагінації, page приходить в msg.payload з UI (див. нижче).

Image description

let page = msg.payload.page;
msg.limit = 20;

if (msg.payload.page === 1) {
    msg.skip = 0
} else {
    msg.skip = msg.limit * msg.payload.page - msg.limit
};

msg.payload = {
    deleted:false
}; 

return msg;
Enter fullscreen mode Exit fullscreen mode
  • Companies pakemonNew. Вузол Mongodb in. Обов'язково вказуємо назву бази даних та колекцію. Image description

_ fanction 9 та fanction 10 присвоюємо msg.topic в яких будуть передаватися данні в вузол join.
Image description

msg.topic = "total";

return msg;
Enter fullscreen mode Exit fullscreen mode

Image description

msg.topic = "data";

return msg;
Enter fullscreen mode Exit fullscreen mode
  • join об'єднує дані і формує object де 
`key` - `msg.topic` 
`value` - `msg.payload`
Enter fullscreen mode Exit fullscreen mode

Image description

  • function 11 формуємо дані які повертаємо в response. Image description 
msg.payload = {
  total: msg.payload.total.length ,
  data: msg.payload.data
}
return msg;
Enter fullscreen mode Exit fullscreen mode

Крок другий:

Потрібно на UI Editor UBOS зробити наступне:

  1. Використовуючи віджет Table відображаємо дані які повернулися в response. Для цього нам потрібна Api. Більш детально ознайомиться з роботою UI Editor UBOS можна тут .

Image description

page  : {{Table_pakemons.pageNo}}

pageNo передається з Table
Enter fullscreen mode Exit fullscreen mode
  • Налаштовуємо Table:
TABLE OPTIONS SETTINGS
Image description {{get_pakemons.data.data}} виводимо данні в таблицу
Image description активуємо пагінацію на боці сервера
Image description {{get_pakemons.run()}} на зміну сторінки викликаємо функцію get_pakemons
Image description {{get_pakemons.data.total}} виводимо дані про загальну кількість елементів.

В результаті при кожному натисканні на наступну сторінку в таблиці з серверу нам буде повертатися така кількість елементів, яку ми вказали в $limit. В даному випадку 20 елементів.

Top comments (0)