Laravel 10 E-Commerce Project - Pagination Customization

hi everyone welcome back to the laravel 10 e-commerce tutorial in this video we are going to learn about pagination customization so let's see how can we customize the pagination on the soft page you can see here in previous video we have created this pagination but our template of by the pagination is this one okay now let's implement this template on our pagination okay so for that I'll go to the project and just go inside the Resources directory then views and inside this views directory let's create a new folder and folder name must be pagination so right here pagination and inside this pagination folder let's create a new file which is default dot blade dot PHP okay now let's open this one swap.blade.php file and from this file let's copy this one this now so just select and cut this and paste inside this default.blade.php file okay now uncomment this so just remove this one and also remove this one all right now uh before this nav tag let's add here if directive so before this first of all check here using effective a passionator has a Pages or note so right here if dollar passinator Arrow ads pages and now after this closing Dev tag just close here the effect tips right here in div foreign now inside this email tag this is the previous link okay and here is the next link and these are the hygienesis number okay so before this uh previous link Li let's add here again effective and here let's check uh check here paginator is on first page or node so for that just right here dollar paninator Arrow on first page okay if paginator is on first page then and also add here on the health part and now just close here active so right here he passed later on first page so just copy this ni and paste inside this inside this block okay a pass generator in on first page then inside the href just add this this one JavaScript or column wide okay and also add here add here a class disabled otherwise if imaginator is is not on on first page then inside the else part let's cut this and paste inside the else block and here just add double curly bracket and dollar paginator Arrow previous pages previous ht1 okay this function and now just remove this style okay and now for the next button next link uh before this Airline just add here if the active and this time check here for the more pages so just try it here dollar paginator Edge more pages then let's display this one otherwise in the else part let's close the effective in if and now let's copy this and paste here if passinator has no more paste then and disable this link so just remove this and add here to JavaScript column wired and pass them zero and also add the class disabled all right if paginator has more page then add here the URL for the next page so right here download paginator Arrow next pagey wire next page URL okay and now let's display here the page number so before this just add here the interactive for each okay and here and delete for each and then dollar elements Edge installer element okay and now let's cut this and paste inside this voice directly and now let's add here first check here for the string so right here dollar rate if a string if element is in the string then simply display here the page number okay without link so first close here then if and now let's copy this one and paste here and now inside this Li let's add here the class disabled okay and inside this hrdf just add here in JavaScript required okay this one and now display here the number so inside double curly brackets just write your dollar okay now add here another effective and check here if element is an array so right here the function and inside this just pass here dollar element and if element is at array then close here the objective and inside this just add here for each dollar element as first and here dollar page Arrow dollar E1 and inside this so add one more effective and check for the current page so right here if dollar page is equal to to an imaginator Arrow current page then let's close here at your next part and close here in here and inside this and just copy this this one cut this and paste inside the this block okay and display here the page number so right here dollar page all right and inside the else part let's cut this one and paste here and now just remove this href the link and add here double curly bracket dollar the URL and also remove this and add here dollar page okay now it's done from this link just remove this class disabled from here and add inside this a like class okay and also remove from here and and inside this inline class now it's done so save this file and also save this one so blade.php file and inside this pagination links and just pass here inside this link or just pass here this one pagination default.play.php page URL so inside this data double double quote and add here the folder name which is pagination dot file name widget default okay so right here default now save this file and let's check so go to the browser and just refresh the page and now you can see here the pagination is as our template okay you can see here the template page also this is the template and you can see here the hours of page okay now let's click on another page and see here it's working next page okay it's color this is the previous page let's copy this style uh previous version Style this one style dot color and add here and send this one so after this paste here okay now save this and let's check again so refresh the page first place second page okay now it's looking good so that's all about imagination customization uh don't forget to subscribe my channel thanks for watching

Channel: Surfside Media

Views: 2,958

Keywords: How, to, Program, laravel (Software), laravel, laravel v10, laravel 10, laravel project, laravel setting up, laravel v10 setting up, laravel v10.0, v10.0, laravel 10.0, laravel 10 playlist, laravel 10 tutorial, laravel tutorial, laravel 10.0 tutorial for beginners, laravel for beginners, laravel tutorial for beginners, laravel10, laravel 10 ecommerce tutorial, laravel 10 ecommerce, ecommerce project in laravel 10, laravel 10 ecommerce project, pagination customization

Id: xBm35G2HZyU

Length: 13min 57sec (837 seconds)

Published: Sun Sep 24 2023