WIelostronnicowe wyświetlanie tablicy React

pytanie zadane 31 grudnia 2019 w JavaScript przez poldeeek Mądrala (5,980 p.)
edycja 31 grudnia 2019 przez poldeeek

Witam, napisałem w Reakcie apkę, która wyświetla mi tablice osób. Chciałbym teraz zrobić tak, aby np. po 10 elementach na dole móc sobie przeskakiwać do kolejnych 10 odpowiednim przyciskiem. Próbowałem znaleźć jak to zrobić, ale szczerze mówiąc nawet nie wiem jak nazwać czego szukam... Ktoś mógłby mniej więcej naprowadzić jak coś takiego wykonać, albo podać jakiś artykuł czy źródło, które to omówi ??

1 odpowiedź

odpowiedź 31 grudnia 2019 przez Tomek Sochacki Ekspert (227,510 p.)

Dwa podejścia, albo pobierasz od razu całą tablicę danych i po prostu wyświetlasz w zakresie od-do, albo pobierasz na każdą stronę osobny zestaw danych z API. Jeśli to nie są wielkie dane to można wziąć od razu całość, ale ja jestem jednak raczej zwiolennikiem robienia osobnych strzałów do API. W url możesz sobie ustawić dla GET te parametry, ułatwi to userowi chodzenie po historii jeśli jest to potrzebne.

Poszukaj pod hasłem paginacja, jest przecież masa różnych przykładów :)

komentarz 31 grudnia 2019 przez poldeeek Mądrala (5,980 p.)
edycja 31 grudnia 2019 przez poldeeek

Jeśli chciałbym to zrobić pobierając zestaw dla każdej strony z API to kwestia sortowania tej listy (po imieniu, albo loginie w zależności co się kliknie) leżałaby wtedy po stronie API ?
Dodatkowo zastanawia mnie jak wtedy poradzić sobie np z takim sortowaniem listy jeśli wyszukuje jakiś element, czyli np dla wszystkich Sebastianów ? Czy wtedy też API powinno nam zwrócić posortowaną taką listę ?
Z góry przepraszam za być może banalność pytań, ale uczę się dopiero Reacta i jeszcze nie rozgryzłem jak właściwie działa API.

1	komentarz 31 grudnia 2019 przez Tomek Sochacki Ekspert (227,510 p.) Ja jetem zwolennikiem aby to usluga obsługująca endpoint w backendzie od razu robila sortowanie. Mozna wtedy zrobic to juz na poziomie zapytania do bazy.

komentarz 31 grudnia 2019 przez obl Maniak (51,280 p.)

@Tomek Sochacki, Paginacja paginacją a co powiesz na automatyczne doładowywanie się treści na scrolowanie (bez paginacji). Robiłem coś takiego ale przy sortowaniu, dodawaniu możliwości zaznaczania wszystkich elementów tablicy to już się robi nie ciekawie :)

komentarz 4 stycznia 2020 przez poldeeek Mądrala (5,980 p.)

Mam pytanie, czy jeśli robimy właśnie każda strona to oddzielny strzał, to w razie bardzo dużej ilości danych, w jakis sposób dowiedzieć ile tych stron końcowo będzie w przypadku np. zrobienia przycisku, który prowadzi do ostatniej strony.. ?

komentarz 4 stycznia 2020 przez Tomek Sochacki Ekspert (227,510 p.)

ja najczęściej pobieram sobie oczekiwane rekordy znając parametry + od + limit (czyli ile rekordów chcę) i wraz z nimi zwracam też łączną liczbę pasujących rekordów do parametrów, coś na wzór:

{
  data: Object[];
  total: number;
}

i dziękim temu znając limit + total i ilość znalezionych łatwo można policzyć wszystkie dane do paginacji.

komentarz 5 stycznia 2020 przez obl Maniak (51,280 p.)

@Tomek Sochacki to podejście mi się podoba, szkoda tylko, że niektórzy robią to inaczej i wrzucają te dane o liczbie elementów do nagłówka z którego trzeba potem to wydziabywać.