Кастомна пагінація з базою даних PostreSQL

Бувають випадки , коли потрібна серверна пагінація для відображення даних у віджеті, який немає властивості Server Side Pagination. В таких випадках можна створити власну пагінацію. На прикладі розглянемо віджет Carousel, де потрібно буде відобразити 3 зображення на кожній сторінці. Дані отримуємо з бази PostreSQL.
Про Server Side Pagination читайте тут.

Крок 1. У зaпиті до бази даних обов'язково вказуємо limit та offset.

Limit - скільки об'єктів ми повертаємо. В даному випадку 3.
Offset - скільки нам потрібно пропустити.

Наприклад, якщо це дані для першої сторінки, показуємо 3 об'єкти і пропускаємо 0. Для другої сторінки показуємо 3 і пропускаємо 3 перших.

Для того, щоб вирахувати, скільки даних потрібно пропустити, потрібно передавати номер сторінки, на яку ми хочемо отримати дані. Номер сторінки - msg.payload.page - передаємо з UI Editor. Про це читайте далі.

let offset = msg.payload.page * 3 - 3
msg.payload = `SELECT * FROM gallery limit 3 offset 3`
return msg;

Крок 2. Ствоюємо API, яка відправляє запит, щоб отримати дані та передає номер сторінки у query params. Номер сторінки зберігаємо у main store. API запускаємо на Page load.

Далі потрібно створити три функції у JSObject.

• storePageValue - функція запускається при завантаженні сторінки та зберігає у значення page 1;

storePageValue: () =>{
   storeValue("page", 1)
}

• increment - збільшує значення pageна 1 та викликає API getImages;

increment: async () => {
   await storeValue('page', main.store.page + 1)
   await getImages.run()
}

• decrement - зменшує значення pageна 1 та викликає API getImages;

decrement: async () =>{
   await storeValue('page', main.store.page - 1)
   await getImages.run()
}

Крок 3. Використовуємо віджети:

• Text - його text {{main.store.page}}

• IconButton - у властивості onClick запускаємо функцію increment з JsObject1

• IconButton - у властивості onClick запускаємо функцію decrement з JsObject1 та у полі Disabled натискаємо на значок JS і пишемо {{main.store.page === 1}}.

• Carousel (у нашому випадку це віджет каруселі, може бути будь-який інший, який необхідний у конкретній ситуації) - у Contents вказуємо нашу апі - {{getImages.data}}.

Результат: