Веб апликације управљају великим количинама података. На пример, апликације за е-трговину приказују милијарде података на начин који је организован и визуелно привлачан. У суштини, подаци морају бити представљени на начин који је корисницима лак за разумевање и навигацију.

Међутим, приказивање свих података на једној страници може довести до проблема са перформансама, споријег времена учитавања и лошег корисничког искуства. Из тог разлога, имплементација логике пагинације може значајно ублажити ове проблеме.

У Реацт-у, можете се одлучити да користите унапред изграђене компоненте које пружају библиотеке за пагинацију, а алтернативно, можете да направите прилагођени систем пагинације користећи Реацт куке.

Имплементација пагинације на страни клијента

Постоје два начина за имплементацију пагинације у апликацијама: пагинација на страни клијента и на страни сервера. Ипак, без обзира на формат који одаберете, основни концепт остаје исти. Пагинација на страни клијента укључује руковање логиком пагинације на страни клијента, унутар претраживача корисника.

Можете имплементирати пагинацију на страни клијента користећи различите технике. Ове технике укључују:

1. Пагинација заснована на страници: Овај метод укључује поделу података на делове или странице фиксне величине, обично приказујући одређени број ставки по страници. Корисници могу да се крећу кроз странице користећи навигационе везе или дугмад, означене бројевима страница или дугмадима за претходни и следећи. Ово је популарна имплементација са претраживачима и апликацијама за е-трговину.
2. Бесконачно померање: Овај метод укључује динамичко учитавање и приказивање нових података док корисник скролује низ страницу, стварајући беспрекорно и континуирано искуство прегледања. Ова техника је посебно корисна када се ради са великим скуповима података који се стално проширују, као што су фидови друштвених медија.

Имплементација пагинације засноване на страницама користећи Реацт куке

Да бисте започели, направите Реацт пројекат. Можете користити или цреате-реацт-апп ЈаваСцрипт команда за подешавање основне Реацт апликацијелокално или користите Вите за скелу Реацт пројекта на вашој машини.

Овај водич је користио Вите, у њему можете пронаћи код овог пројекта ГитХуб спремиште.

Након подешавања вашег Реацт пројекта, наставимо са имплементацијом пагинације засноване на страницама користећи Реацт Хоокс.

Конфигурисање скупа података

У идеалном случају, обично бисте дохватили и приказали податке из базе података. Међутим, за овај водич ћете преузети податке са лутке ЈСОНПлацехолдер АПИ уместо тога.

У срц директоријум, креирајте нови компоненте/пагинација датотеку и додајте следећи код.

1. Креирајте Реацт функционалну компоненту и дефинишите следећа стања.

   увоз Реагујте, { усеЕффецт, усеСтате } из"реаговати";
   увоз"./стиле.цомпонент.цсс";
   функцијаПагинација() {
   конст [дата, сетДата] = усеСтате([]);
   конст [цуррентПаге, сетцуррентПаге] = усеСтате(1);
   конст [итемсПерПаге, сетитемсПерПаге] = усеСтате(5);
   конст [пагеНумберЛимит, сетпагеНумберЛимит] = усеСтате(5);
   конст [макПагеНумберЛимит, сетмакПагеНумберЛимит] = усеСтате(5);
   конст [минПагеНумберЛимит, сетминПагеНумберЛимит] = усеСтате(0);
   повратак (
    <>
   
    Компонента пагинације</h1> 
   >
   
    </>
    );
   }
   извозУобичајено Пагинација;

2. Имплементирајте логику за преузимање података из лажног АПИ-ја. Унутар Пагинација компоненту, додајте доле.

    усеЕффецт(() => {
    донеси (" https://jsonplaceholder.typicode.com/todos")
    .онда((одговор) => респонсе.јсон())
    .онда((јсон) => сетДата (јсон));
    }, []);
   конст дисплаиДата = (података) => {
   повратак (
   
   
    {дата.ленгтх > 0 &&
    дата.мап((задатак, индекс) => {
   повратак<ликључ={индек}>{тодо.титле}ли>;
    })}
    </ul>
    );
    };
   

   Код изнад има две главне сврхе. Прво, када се компонента монтира, усеЕффецт окидачи закачивања за преузимање података са спољне крајње тачке АПИ-ја који се затим конвертују у ЈСОН формат. Добијени ЈСОН подаци се затим користе за ажурирање података променљива стања са преузетим подацима о обавезама. Друго, тхе дисплаиДата функција ће преузети податке као аргумент и приказати податке као неуређену листу обавеза.
3. У повратном сегменту Пагинација компоненту, укључују дисплаиДата функција за приказивање преузетих података у претраживачу. Ево ажуриране верзије кода:

   повратак (
    <>
    Компонента пагинације</h1> 
   >
    {дисплаиДата (подаци)}
    </>
   );
   

   Позивањем дисплаиДата (подаци) унутар ЈСКС елемента и прослеђујући података променљива стања као параметар, функција ће затим приказати преузете податке као неуређену листу у претраживачу.

У овом конкретном случају, приказана листа се састоји од две стотине обавеза. Међутим, у стварним сценаријима, апликације ће управљати великим количинама података. Приказивање свих ових података на једној веб страници може довести до проблема са перформансама, као што су споро учитавање и свеукупно лоше перформансе апликације.

Да би се ово решило, било би прикладно укључити функцију пагинације како би се осигурало да свака страница садржи ограничен број ставки којима корисници могу засебно приступити помоћу дугмади за навигацију.

Овај приступ омогућава корисницима да се крећу кроз податке на управљивији и организованији начин, побољшавајући укупне перформансе и корисничко искуство апликације.

Имплементација логике пагинације за приказивање ограниченог броја ставки по страници

Да бисмо одредили које ставке обавеза ће се приказати на свакој страници, морамо да применимо неопходну логику. Међутим, пре него што наставите, неопходно је одредити укупан број потребних страница на основу доступних обавеза.

Да бисте то постигли, можете додати следећи код у Пагинација саставни део:

конст странице = [];
за (дозволити и = 1; и <= Матх.цеил (дата.ленгтх / итемсПерПаге); и++) {
 пагес.пусх (и);
 }

Исечак кода изнад, понавља се кроз података низ, израчунавајући укупан број потребних страница дељењем дужине података низ по жељеном броју ставки по страници—почетни број ставки по страници је постављен на пет у Предмети по страници држава.

Без обзира на то, можете ажурирати овај број по потреби да бисте тестирали логику. На крају, сваки број странице се затим додаје у странице низ. Сада, хајде да применимо логику за приказивање већег броја ставки по страници.

конст индекОфЛастИтем = цуррентПаге * итемсПерПаге;
конст индекОфФирстИтем = индекОфЛастИтем - итемсПерПаге;
конст пагеИтемс = дата.слице (индекОфФирстИтем, индекОфЛастИтем);

Овај код одређује задатке за приказивање на страници претраживача на основу Тренутна страна и Предмети по страници променљиве—извлачи одговарајуће индексе за скуп задатака из низа података користећи метод пресека. Индекси се затим користе за преузимање специфичних обавеза које припадају жељеној страници.

Сада, да бисте приказали обавезе, ажурирајте дисплаиДата функција преношењем пагеИтемс као параметар. Ево ажуриране верзије кода:

повратак (
 <>
 Компонента пагинације</h1> 
>
 {дисплаиДата (пагеИтемс)}
 </>
);

Прављењем овог ажурирања, дисплаиДата функција ће приказати ограничен број обавеза на одговарајући начин, одражавајући тренутну страницу.

Поједноставнији приступ страници и навигација помоћу дугмади за навигацију

Да бисте осигурали да се корисници лако крећу и приступају садржају на различитим страницама, потребно је да додате претходно и следеће дугме, као и дугмад која одређују одређене бројеве страница.

Прво, хајде да применимо логику за дугмад са бројевима страница. У Пагинација компоненту, додајте код испод.

конст хандлеЦлицк = (догађај) => {
 сетцуррентПаге(Број(евент.таргет.ид));
 };
конст рендерПагеНумберс = пагес.мап((број) => {
ако (број < макПагеНумберЛимит +1 && број > минПагеНумберЛимит) {
повратак (
 кључ={број}
 ид={број}
 онЦлицк={хандлеЦлицк}
 цлассНаме={цуррентПаге == број? "активан": нула}
 >
 {број}
 </li>
 );
 } друго {
повратакнула;
 }
 });

Тхе хандлеЦлицк функција се покреће када корисник кликне на дугме са бројем странице. Ова радња затим ажурира Тренутна страна променљива стања са изабраним бројем странице.

Тхе рендерПагеНумберс променљива користи Мапа метод за понављање странице низ и динамички генерише ставке листе које представљају сваки број странице. Примењује условну логику да одреди које бројеве страница да прикаже на основу дефинисаних ограничења максималног и минималног броја страница.

На крају, додајте код за следеће и претходно дугме.

конст хандлеНектбтн = () => {
 сетцуррентПаге (цуррентПаге + 1);
ако (тренутна страница + 1 > макПагеНумберЛимит) {
 сетмакПагеНумберЛимит (макПагеНумберЛимит + пагеНумберЛимит);
 сетминПагеНумберЛимит (минПагеНумберЛимит + пагеНумберЛимит);
 }
 };
конст хандлеПревбтн = () => {
 сетцуррентПаге (цуррентПаге - 1);
ако ((Тренутна страна - 1) % пагеНумберЛимит == 0) {
 сетмакПагеНумберЛимит (макПагеНумберЛимит - пагеНумберЛимит);
 сетминПагеНумберЛимит (минПагеНумберЛимит - пагеНумберЛимит);
 }
 };

Да бисте приказали дугмад за навигацију, ажурирајте ЈСКС елементе на следећи начин:

повратак (
 <>
 Компонента пагинације</h1> 
>
 {дисплаиДата (пагеИтемс)}
"број страница">




 онЦлицк={хандлеПревбтн}
 дисаблед={цуррентПаге == странице[0]? истина: лажно}
 > Претходно
 </button>
 </li>

 {рендерПагеНумберс}


 онЦлицк={хандлеНектбтн}
 дисаблед={цуррентПаге == пагес[пагес.ленгтх - 1]? истина: лажно}
 > Следеће
 </button>
 </li>
 </ul>
 </>
 );

Када се компонента прикаже, приказаће бројеве страница, претходно и следеће дугме и одговарајуће ставке података за тренутну страницу.

Избор између библиотека пагинације и прилагођених система пагинације

Када је у питању одлука између коришћења библиотека пагинације или изградње прилагођеног система пагинације, избор зависи од различитих фактора. Библиотеке пагинације, као што је реацт-пагинате, обезбеђују унапред изграђене компоненте и функционалност, омогућавајући брзу и једноставну имплементацију.

С друге стране, изградња прилагођеног система пагинације користећи Реацт куке нуди већу флексибилност и контролу над логиком пагинације и корисничким интерфејсом. Одлука ће на крају зависити од ваших специфичних потреба и преференција.