How to do Pagination in ReactJs NodeJs and Mongo DB || Pagination in React Node Mongoose. #mern

hello guys welcome back to the debug arena in this video I am going to apply the pagination in our react application you might have seen many videos on YouTube regarding this topic how to do pagination in react but let me tell you that there are very few videos which provide the better solution for this because they are not doing the pagination for both front and back-end combined like most common way we do pagination is that we fetch all the user's data from our database and then do pagination in our front end so I will show the page number here one two three four five and on each page number I will show the certain amount of data suppose 5 so on the first page I will show these five data in the next page this file and so on but this is not the correct way because if you have a large amount of data like 1000 10 000 or more than that then this will make your website slow because you are fetching all that data at once and then doing the pagination so in this video I am going to make an API node.js which will return the amount of data which we specify like if we specify the limit as 5 it will return only 5 data in each page and also I am going to merge it with our react application so that everything will go on smooth and our website will be more optimized for this I am going to use this package name react pagenate this package will provide us with this pre-made UI with the next and the previous button and the page numbers and also it has a predefined function like on on page change and the page count and many more after this I will create the API node.js which will return as the amount of data we want and in the third step we will combine this and make our pagination work this video might be long but believe me I am going to make this thing very easy and you are going to understand pagination in a very good way so without any delay let's get started okay the first thing is that we need to install this package name react page in it I have already installed it you can go to this website and or run this command to install it and after that I will import it I had already installed it so I'm importing it directly [Music] okay I will save this now I will come here after this I am going to copy this code this is the code of that UI [Music] and it also has a predefined function it is going to help us a lot I will paste this here and I am going to create this function name as handle page clip let me just create it and for now I will just console here e [Music] yeah done let's see the output okay the page count is not defined so currently we don't have page count we can give it S8 so it will show the eight pages we can come here so you can see that we are getting something but it doesn't have any CSS so for CSS you have to come to this website I will give the link in the description and this is like a demo code for the react page in it so you can see we are also using this react page in it and here they have already written the CSS so I will copy this CSS and from I can see yeah we can copy this from margin let's see I will come here paste it here I will remove on page change because it is already there now I will come let's see the output and you can see that our pagination bar is looking good and you can see the next and previous is working fine and also let me just see in the console if I click on two you can see the selected is one because it is an array so it starts from zero yeah so our front end priority is done now let's go to the back end this is my backend code and you can see here that I have already imported distinct Express mongos and the other things and also I have already imported a model which is storing our users details and I am storing it inside user so now I will create a new API for our pagination thing so I will write Here app Dot get I can write the API name as paginated users you can give the better name for now I will just return your page United yeah [Music] okay to check the response I am going to use the extension of the vs code name as rest client so you can come here to the extension and search for rest client and install it I had already installed so after installing what you have to do you have to come here and create a new file you can give any name just keep extension s dot rest okay here we can write get and we can write like this http my server is running on localhost 5000 and here we can give the API name so my API name is paginated users okay so I can write here paginated user we will save this and you can see here and then you can click on this send request and you can see here that we are receiving the response now let's create the API so the first thing is that we have to fetch all the users data so let me do that user is my variable which is storing all the model and I will use find function so this will fetch all the users data and I will show it here so I can pass it here save this come come here click on send request and you can see that I am getting all the users data now let me just here as I told you earlier that in this we are going to receive two parameters like page and limit so that thing we will be receiving from our URL only so come here write like this page is equals to 1 and we can give limit as 5 it will return as the five value but for now it will don't do anything because we haven't done the coding yet so let's just receive these two we can do that in this way Page is equals to okay so in this way you can receive page and limit from your url so now we have to make two variables the start index and the end index they will be the variable that will determine which data will be shown let me just quickly do that for start index we have to write like this page minus 1 because it is an array and it starts with 0 but we are sending as one and for the last index yeah not one you have to pass here limit [Music] now we will be using the slice method to get the particular amount of data So currently this variable all user is storing the 28 data but we will slice it so I can write like this const result equal to all user dot slice and it will slice from start index who last index yeah okay and I will just return this result let's see what is the output okay now I can send the request and you can see that we are getting a sum amount of data like one two three four five okay we are getting only five data because we are passing so suppose if I change limit as 10 and then send the request you can see here that I am receiving the 10 data and if I will pass limit as 1 I am going to receive only one data okay this is working fine now let's just come here [Music] that's not it we have to cover many things here like currently we are getting the data as per our page number and limit but we have to cross verify that the data we are getting is correct like if in front end if I click on page two I will receive some data but how do I know what is the next page and what is the previous page so let me do that also so for that we can write here let me just create the variable like object name as reasons okay so I will write here results dot next is equals to page so it will be the page with Page Plus one in the same way we can receive the previous page to the previous page will be the current page minus one and limit yeah there is no need to pass the limit but here also suppose I am on the first page so there will be no previous page and I am on last page so there will be no next page so we have to cover that condition also so I can write here for the next if that is my last index is less than my all user dot length yeah then I will return result dot next [Music] in for previous I can write if my start index is greater than 0 then only there will be the previous button so I hope it is making sense to you let me just quickly explain what we have done till now and why we are doing it let me just do some formatting so first I have fetched all the users data here then I have received page and limit from here and then we have created start index and last index this will be according to our page under limit that how much data we should show then I have created this object name as result after that I am storing this next year next will be my current page that is one plus one so that we can know that whether the next page exists or not same thing for the previous one and here is the whole result so we can also write here not like this we can just write here results dot result so it will also be sold in this variable and I will pass result 0. okay this thing is also done now there are two other things that we want one thing is that how many total data is there so I can write here total user is equals to all user Dot length and also we want to know that how many page number will be there is one more thing which is the page count like in front end also you have seen that we have the page count here which determine how many page should be there so how can we find that so for that we have to just divide our total number of users with limit so we can do that results Dot page count I am going to use mat.cl oud by limit okay so this will return as the page count so let's see whether it is correct or not so I will save this I will come here and click on send request okay the server is starting yeah so I started I will click on send request and you can see okay the page count is actually null and why it is like that okay l e n g t h okay save it again click on send request and you can see that total user is 29 page count is 29 it is because our limit is 1. and currently we are on the page 11 why it is like this oh okay okay I missed this thing like we are receiving a string here so we have to convert it so I will just do pass it into here foreign click on send request yeah and you can see that currently I am on page number one limit is one therefore the page count is 29 [Music] and the next page is 2 and there is no previous like you can see I have only one data and there is no previous one so now if I change this limit suppose 5 save this and when I click on send request you can see the page count is 6 because if you divide this 29 by 6 uh sorry 29 by 5 you can get this six the next page is two and this is and you can see that we are getting the Phi data let's see the page number also if I click here and go to Five fifth page and save this send request you can see my the next page will be the sixth and the previous page will be 4. okay so our backend is also ready now let's just merge a front-end and backend okay our backend pad is done now let's just integrate that API in our front end you can see here that this is my function which is calling this API from which we are getting all the users data so you can see we are getting all these users data and after that we are storing the data in this state set data and at bottom we are just mapping over it so for now I will just comment this thing because we don't need it now we will get the data in console only and then we will apply it here now this is the function which get called when we click on any page so here I will call this fetch function foreign [Music] which will be paginated users and as you know that we are passing the page and limit also let me do that I will write here so you can see here that I have called that API and passed the page as my as current page and limit as limit so let me just create this two state yeah okay [Music] it is done so let's see what is happening here so if I click on three I am getting this value and you can see the result is zero and why it is like that inside this both the state I have set it as array we have to pass one year so it is like we have to pass the value now let's see it should work now so I will click on file you can see I will come here and you can see my next page is two uh yeah yeah because I am passing the pages one so if I will pass your current page as food let's see what will be the output so if I click here come to here and you can see that my next page will be 5 because I had passed the Fourier okay so it is working fine now let's integrate it in our UI so anyway you can see that we are calling this function here and here we have given page count as eight so first let's do this [Music] so I will create a new function here and I will call this fetch function here after this I will create a new state name as page count it will also be one now I will come here this is my get paginated user and here I will set page count as data Dot Page count because you can see here here we are setting the page count [Music] it is done and now inside page count I will pass here that state and now let's just call this API inside our use effect for the first time yeah okay and I will just comment get all users for now let's see what is happening here okay let me just clear this and I will click on no no you can see that it has already applied like it has 29 Pages let me just change the limit so I will come here and I have changed the limit as 5. it should have six pages and you can see it is having six pages and if I click on three you can see I am getting the data and the next page views file yeah yeah the next page will be fine because we haven't applied it we have passed four only but we are getting the page count as correct now let's just pass this page only like currently we are passing the static page number here but let me just make a dynamic so how can we do that just come to this handle page click and at start you have seen that we are getting selected here selected zero two so if I select 5 here I'm getting 4 if I select 6 here I am getting 5 so what I will do I will come here I will just set current page as e Dot selected plus one okay and then I will call this function get paginated users okay let's see whether it will work or not so I will just console this like delete this and I will click on first page and I am getting the next page as five okay and if I click on 2 I am getting next pages two okay it should be three actually I think the state is not updating the real time like this thing happens sometime like you can see currently I I have chosen four but it is showing the state of previous if I choose 5 now it will show the phone that is yeah you can see it is showing 5 because yeah so I think we have to manage this thing so what I will do I will come here [Music] and I will just remove this and instead of used it I am going to use ref here so I will write here const current page is equals to use ref yeah it is also used to set the values and I will write here like this and I will pass one here no not like this so inside use effect I will pass current page dot current is equals to 1 so it will save it as 1. now here also I will pass current page Dot current and inside your Set current page instead of Set current page I will write current page dot current is equals to e dot selected Plus 1. [Music] let's see it should work now let me just delete all this so I am going to click on three you can see selected is to and now I it should have page four yeah now it is working fine like it has page four previous page is two if I click on six [Music] previous Pages five next page is not there I am also getting the data only four data it is because I have only 29 yeah on the fifth page I'm getting next Pages six yeah six previous Pages four and I am getting the Phi data okay so it is also working perfectly now you can see that in this area now we don't have option to enter the limit let me just add it manually I'm not going to style that I'm I will just add that styling part you can do on your own so I will write here input and here I will click the button name as set limit and here I will call the function it is this is done now I will just give placeholder here as limit and the on James function here I will call set limit this is the state which I have already made and I will pass e Dot Target Dot value okay now let's just create this function change limit I will come here here what I will do I will call this function again so and let's see what is the output let me just delete this So currently we are getting six page and if the limit is 8 and I click on set limit so we can see the page has changed to 4. because if we divide 29 by 8 we are we will get that value and I add uh one is already selected next page is two previous page is not there and we are go getting eight data in a result so it is working perfectly so if you can see currently I'm on third page it is on fourth so if I change the limit to like 2 you can see the page has been increased to 15. if I change the limit to 7 Note 7 4 [Music] Pages change to 8. so in this way we can do the pagination and fetch the amount of data we want not the whole data so only thing remaining is that we have to show the data so let's just do that quickly at start I had already told you that this is the API which is getting all the user's data and I am setting it inside this state so whatever data I am getting so you can see here I have made up only one function where we are getting data from our API so I will come here and set data and it will be data dot result because a whole user data is it inside this resulting yeah and after this I will uncomment this thing like the table and all let's see whether it will work or not yeah so you can see that our limit is 4 so we are getting 4 data and if I change this I am getting this if I click on next then also I'm getting in if I click on previous then also I am getting one thing if what if I will write here 100 so you can see nothing is coming it is because if I select here one then it will come it is because when we are setting the limit now we are not setting the current page so we have to do that also to come here when we are setting the limit that is change limit calling the change limit we have to set current page to dot current to 1. so whenever we change the data it will come to first page now let's check it out I will just refresh this so here I will write 7 I will set limit you can see it is on first page only if I go to Phi it is one only one data and now if I write here 100 and I click you can see the data is coming and now if I write here 20 okay data is coming but one is not highlighted so it is because we have to add one more thing here and I think which is something like force page yeah and it will be equal to current page current page dot current so it is like we are forcing that it should highlight the page which is our current page let's see if I write here 100 and click on set limit uh it is not highlighted yet let's see why it is so if I write a 7 the highlighted is 2 and if I click three okay it is going 4 yeah yeah I get it it is because the pagination whole thing is array and we are setting the current Pages plus one so we just have to do here minus one now let's see let's hope everything will work fine so I will write here two I will click on set limit it is on first page only I will go to fourth page then I will write 100 I will click on set limit and you can see the data is also coming one is also highlighted one last if I write your file set limit and you can see one is highlighted and it is also changing fine so in this way you can do pagination in your react application by creating a custom node.js API so that your website won't get slow to load a tons of data that's it for this video I hope you have learned about pagination things and all and if you have learned then please subscribe to my channel and also share this video with your friends if you found this video helpful then please like share and subscribe thank you

Channel: The Debug Arena

Views: 2,699

Keywords: React Node Pagination, MongoDB Pagination, React Pagination Tutorial, Node Pagination Example, How to do Pagination in React Node, MongoDB Pagination Tutorial, Client Side pagination, Server Side pagination, Pagination in react js, How to do pagination in react js node js, How to do pagination in react js, Pagination in mern, Pagination, server side pagination, client side pgination, custom pagination, How to create custom paginataion, Best way to do pagination, react js

Id: vHuIreTyYbw

Length: 28min 7sec (1687 seconds)

Published: Mon Feb 27 2023