How to Build a Custom Pagination Component in React? Pagination in React JS
ฝัง
- เผยแพร่เมื่อ 5 ก.ย. 2024
- #paginationInReact #reactjs
Learn How to Build a Custom Pagination Component in React? Simple Guide to React Pagination. Pagination in React JS is a function of apps that allows them to show data on a series of pages. The information can be seen by going from one page to the next rather than viewing it.
All About Pagination in React JS.
A simple guide to Pagination in React.
I am Muhammad Yousof. Welcome to my youtube channel code with Yousaf. In this channel, all content will be computer science related like web development, front-end development, database design development, database learning, react js learning, and others.
This is the most explanatory pagination video I have seen ever
This video was really great I understand pagination better. I did not believe it was so simple. Praise God and thank you.
After I watching this video, I did completed pagination work !!! thank you🤗😇
thanks u bro yousaf I` m real glad to learn some thing every day every I got alot of errors but when i watch your videos give me a lot of idea i can solve my problems simple honest guide explanation ...
Thank You For The Simplest video
watched this video. uses pure react to create pagination which is very useful for learning react. good work keep it up
5:58 thank bro
Thank you for the great tutorial but I have two problems/features I wanted to ask you about:
1. I have some white circles in front of each of my hyperlinks that is interfering with me clicking on some of the numbers because they a collisioning
2. How can I make it so it shows me only the page infront and the page before my current instead of all the pages (something like if I am on page 6: {PREV, 5, 6, 7, NEXT})
Thank u so much my friend God bless u.
Really Awsome ... need more React js methods
thank you This video was really great I understand pagination better. I did not believe it was so simple. Praise God and thank you. 👻👻👻👻👻👻👻
Hi Yousaf, thanks for explaining, but in my case these pagination list items coming in vertical position. Could you please share the CSS as well
Exactly what i was needed thanks bro... Your explanation is good. ❤
Thank you :)
Absolutely simple & on point tutorial!
This is cool.
One Question - If I'm having 50 pages sense will I get the 1 to 50 numbers in a row?
Thank you very much Bro, you taught me something very important
Works like a charm ! Thank you for this really good tutorial!
This video was really great! Thanks a lot!
🥰 Very helpful video, Thank you very much, well explained
thank you soo much its help me and thats the best way i use it
Thank you!! It worked in my project...
You save my life, thank you bro 👍
Gracias querido amigo, e ayudaste mucho con un pequeño proyecto que estoy desarrollando en este momento, Un Fuerte abrazo
on number item you are using ID,
i try use {index + 1} but the number just 1,2,3,4,5 not 6,7,8,9,10 per-page.
how to fix this
-
btw nice tutorial sir, thankyou
oh fixed, i use this
{index + 1 + (currentPage - 1) * recordsPerPage} .
@@muh_ismail where is the exact change u did, can you please send me ur code
nice explaination
Very usefull for me
First all thanks, your explanation awesome
CSS file or code? not available can you plz share.
const number = [...Array(npage + 1).key()].slice(1) why i have a error thís
Thanks for this buddy
Thank you very much, you saved me :)
Amazing tutorial 😍😍
hello
Where did I find Data.json?
It says that:
Compiled with problems:
×
ERROR in ./src/components/Users.js 8:0-31
Module not found: Error: Can't resolve './Data.json' in 'C:\Users\ASUS\my-app\src\components'
thanks a lot for this great tutorial , love it
hello
Thank you for this it was great tutorial. watching your this video I got ,S.NO of table is same like 1-5 or next page 1-5 so on....but data changed. how to fix it pls help.
what numbers variable doing exactly on line 13 ?
Graciass!! Me sirvio mucho
thank you sir
Bro I want change the background color of active blue to any other color how to do it?
did you upload to Github account, if uploaded please share link .
thank you so much
it didn''t work for me , it still shows all the records at once in the same page
Thanks
...Array(npage+1) gives me error ,array length is not valid why?
I can't see where is the problem but if you Look at how I wrote the code will be no problem
I also got the same error. This was due to es6 which is present in tsconfig.json. so u can use the below code which fixed my error.
const numbers = Array.from({ length: npage }, (_, i) => i + 1);
@@krazegaming8415 const numbers: number[] = Array.from({ length: npage }, (_, i) => i + 1).slice(1)
@@krazegaming8415 hey do you have its css file?
hey do you have its css file?
Que pasa si no me detecta el diseño la paginacion
i also got the error for the array slice
also provide a code for better understanding
where is css part?
thanks but one mistake is there.
whats that can you please tell
bhai source code kaha milega ?
source code plz
hey can you provide the css file
its bootstrap default css.
okay?
nice video and special thanks👍🫡
source code plz