Load more pagination with jQuery ajax | Django eCommerce Website | Django Tutorials

hi guys welcome to code artisan lab this is our 21st video for django e-commerce website and in this video we are going to create load more pagination in our product list page okay so in uh with the help of jquery ajax and django we will perform this pagination so i am going to perform this pagination on the or all product list so when you go to the home page and when you click on the all products here we have a link when we click on the all products then we will uh i'm i'm showing here the load more pagination currently it is not working but now we will we will start to work on this okay so we will implement this load more pagination so let's start to do this so first of all we will click on this we will perform the click event and then we will send the server that how many records you we want to fetch and here we how many records we want to show initially so we have only four products and initially we want to show uh for this example we will show only three products and when we click on this then we will show the fourth product and when our total products and and our total number of uh appending element will equal then we will hide the load more pagination okay so let's start to do this uh first of all what we will do we will open our product list page so here i have a product list page i will open this in sublime and here i have defined this anchor link so first of all i will replace this with the button okay so this will be a button okay button default functionality is button and if you want to type the submit then it will perform the form submission okay and i will give a id load more and i will add a class here in this uh in this box in this box this is the box in this box i will add a class uh here product box okay so whenever we click on this i will count this box that how many box are currently appearing in this page okay so first of all we will perform this so i will copy this and we will create a new gs file in our main static here i will create custom.js okay so here i have added the custom.js and i will write the code download document.ready and now i will perform the on click event and here i will count the total current result current products you can see sorry current products so i will count here product box dot length okay and i will add here one more thing data limit but how many data i want to show more like i have a three then i want to uh it's a total four i am first of all we will limit this three okay so let's first first thing do okay we will come back to this but first of all i will go to the main views dot py file and here we have a product list and here i will add three so it will fetch the first three result okay so refresh this so this is a three result then when we click on this that how many data i want to show more so here i will define the limit i want to define the i have to find the limit that i want to show more three data and one more thing i will define data total it means how many data i have total in the uh database you can see so here i will count the total products so total data so we have a we have a method count if with the help of this method it will return the total counting of the products so i will pass here this total data and in this total data i will add this okay so when we click on this i will face the total i will face the limit we will collecting this because we will send this data to the server okay so this will be our attribute data limit and how many total i have with the help of this we will check and hide the load more button okay now let's console this console log current products limit total okay and now i will link this custom.js in our product list file okay so in the blog content before the end block i will add here i will copy from the base html i will copy this link and i will add it here and i will name it custom dot yes okay so let's check this refresh this and i will check that i have a custom.js so yes i have a custom.js and it is loading now now i will click on this and console this so i have this console click on this so it is a three so first three is what it is it's a current products and then limit it is a string and then total okay so we have all values now we will send this value with the help of jquery hx to the function okay so here we will start the ajax start ajax and end okay so we have already performed the ajax in our filter so i will take some help from my filter page so i will copy this code i will copy this and paste it here okay i will copy the full pagex code okay so this so i will add the load more load more data okay and here i will define the data this is the data that we will send to the server so the first data will be limit and the second data will be uh this will be our limit and second data will be our offset the offset will be our current products that are that how many products it is showing now okay so data type is json and here before send it means in between when we get the response from the server what what we want to show okay so this will this is our load more so i will first of all so this will this is our load more icon load more icon i will add a class and here first of all i will add attribute disabled so that user cannot able to cannot able to click on this when we are fetching the response from the server load more attribute disabled and one more class load more icon load more icon okay and i will add a class add plus pin so this fs pin will be this fs pin will be around this icon make this icon animate okay so fs pin and in the if our data if our result is success then we will this make this false and remove this class okay so let's do this because we have not created this so it will be show this but not actually work the success so we can test this now so let's refresh this page so when we click on this so it is disabled and icon is moving okay so we have not created the other thing so that it is showing the 404 because we have not created the routes and the functionality okay so let's go to create the route and the functionality so we will open the okay i'm going uh i want to urls and i will add here path and this will be our load more data load more data okay so this will be name of our url more data and in our views dot py i will copy this and create a functionality this will be our load more data okay so we don't need this minimum maximum price i don't think we don't we also need this in a product list page okay so i will review that again and if we not need then i will remove that okay so here we need the start so this will be our request dot get okay so we are using the get method if you want to define the post method then you can define with the help of type another attribute another property okay so if you define the type then you then uh remember that if you define the post method and you have to define the token okay but we have not yet defined the post matter method so it will all it will default take the get method so we will we use the get method here start and this will be our limit i will add i will name it offset okay so this will be our limit and we don't need the count here and here we will define what is what is the formula of this result that i want to skip this and then fetch the this result okay so this will be this will be get another three result from the database okay so here we are running the filters in the filters what we are doing we have created the page when we click on this then we send the response to that page and that page create the html and return the response as a template so here we are doing if you if you are following this series then you will understand all the things okay if you are new then please review the filter video and another video then you will understand all the things so i will copy this okay i will copy this and okay i will remove that and here i will pass the data okay so product list html in the ajax file so in the agex file here we have a ajx file we also need to add air product box okay so we will copy this and this okay so when we click on this we will append the data so we are returning the data as a json so here we are returning the data as a json so what we will do we will we have a id filter product so we will append the data in this div so we will append append the data so here we have a data response dot data because we are returning the data okay so let's check this all this work uh okay now we need to change this according to the route i will upload all the things on the github so please review the code okay if you are doing practice along with the along with this video then it will best okay so okay let's check this so when we click on this it is showing 500 internal error so let's check this what it is saying it is saying start okay so we need to okay we are sending the offset but we are getting the start okay we need to set this offset okay let's refresh this and we will click on this again we are of some response okay one thing more this should be end so here end okay this will be end so it will convert the string into end okay so let's refresh this again click on this so here you can see that we have a fourth we have a fourth product okay so if you have a 10 product then you will face the another three then refresh the another three you can set the limit and offset according to a requirement now the last thing we need to do we need to hide this load more button if our total result and our showing result is equal okay so that i have i'm getting the total this a total result in this total variable okay so after appending we need to find the length so here i will find i will get the length where total okay so here i will check if total equal equal to if total equal equal to where is the total okay we need to we are sending the just a minute okay this product box length and this total okay this two actually this variable is same so that i have confused so this is total showing okay so this is total showing is total showing equal equal to total then what we will do we will remove this we will not hide this we will remove that remove that element okay so let's click on this so element has been removed so i have implemented the load mode page ratio okay so if you run on this server then it will show the spinning icon and all the things because we are working on the local load so that it is a hide instantly okay so i have implemented this you can try with this filter we will also work we will i will implement i will create another video and implement this with the filter but you can try this with filter on yourself okay so practice it more and unders try to understand the all the things okay so you will understand okay so i think i have created all the i have created this uh i have created this load more pagination if you any query any doubt then please add in the comment section and like this video share this video comment your thoughts about the about the project about anything okay so subscribe my channel and uh follow this channel thank you and click on the bell icon also so thank you thank you so much

Channel: Code Artisan Lab

Views: 1,027

Keywords: Django tutorials, Django 3, Django tutorial for beginners, Django Python, Learn Django From Scratch, python django, django ecommerce admin, django ecommerce project, django ecommerce website, learn django with ecommerce project, fetch product from database, django ecommerce tutorial, django load more pagination, django limit query data, jquery ajax django pagination, load more pagination with jquery ajax, fetch more data on button click in django

Id: QVRm4_njFIQ

Length: 18min 6sec (1086 seconds)

Published: Sat Apr 24 2021