Бувають випадки , коли потрібна серверна пагінація для відображення даних у віджеті, який немає властивості 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}}
.
Результат:
Discussion (0)