Lazy loading table


0

Здравейте.

Някой може ли да препоръча guide или някакво четиво за lazy loading таблица в angular2? Има ли някакви готови компоненти или директиви, които да помогнат за да заредя movies list-a от workshop-a lazy? Сиреч да има pagination при който се връщат първо първите 10, на втора страница вторите 10 и т.н. а не да вземам всички филми едновременно.



Отговори



4

Не се сещам за готов надежден компонент, който да ползваш, но то и проблема не е тясно свързан с Angular2, така че можеш да си напишеш сам имплементация сравнително лесно.

При клик на страница 1 (някакъв html елемент, примерно бутон) ще викаш функция с аргументи page=1 & pageSize=10, като тази функция ще прави API call към съответния уеб сървис, който да ти върне филмите. Логиката в уеб сървиса ще е нещо от сорта на:

let movies = db.Collection('Movies')
.skip((page-1)*pageSize)
.take(pageSize);

return json(movies); 

След като получиш JSON-а на клиента, можеш да си го обработиш както искаш (да напълниш редовете на таблицата в случая). 

Горната функция, за page = 1 и pageSize = 10, ще ти върне първите 10 филма.

За page = 2 и pageSize = 10, ще ти върне от 10 до 20-ти филм.

За page = 3 и pageSize = 10, ще ти върне от 20 до 30-ти филм.

Това е на прима виста, което се сещам и то си е най-стандартен pagination подход.


от INKolev (4141 точки)


1
OK благодаря. Кристално ясно :)

от makkasi (142 точки)