12 Laravel Livewire Custom Pagination Links

[Music] these patients are actually default pagination which uses bootstrap but I have used tailwind CSS here so let's design our our custom pagination links how we can do that hell we have we have yeah custom pagination views what you need to do you just need to define your view the blade file where you have the page nations and that's going to work you can also use this function inside your component but we are going to stick with this one how it's going to work let's see so here we have the links and we can define the gene nation - links this is the file I'm going to create on our views and views reside inside resources views and I have already created that so this is pagination links dot laid dot PHP which is an empty file let's see what's going to happen when we are not giving anything inside this file refresh and that is gone no nothing is there and I can say I am pagination click and yeah it's coming here so yes we can simply define our petition inside this file how we can define we have a couple of methods so first we need to check if there is a pagination so has pagination has pages actually so let's see if we have the paginations then and if then I will show a UI with a Ally of previous and one is for next and let's make it flex and justify between okay let's try this we have previous and next and now if I change this pagination to 20 so then we don't need the pagination in that case at the last you can if you can see we don't have any pagination okay that's good we have done that next we need to wire click and we need to go to the previous page so once again here we have a function previous page and remember this previous page function is coming from this great we have and at the last we have this previous function previous page function which is going to trigger and remember wire click is actually going to trigger any PHP function inside the component so we have this similarly we have a next page also so we can wire click on next page so we need to define everything while click next page let's try this and I need to make it to so that we can actually see refresh and yeah we have to let's go to the next click yeah it's working next once again previous previous yeah it's all working that's cool let's let me modify these things with some stylings so now I have given some classes to define and to style these things so there is a border shadow rounded BG white text Center reading x2 padding y1 and width of 16 so that's why it's looking like this cool but you can see if I am on the first page even if I can click on the previous it's going to the minus one page minus 2 page you can see at the URL but we need to prevent this I have added cursor:pointer also so how we can prevent when the previous page is not available similarly when next page is not available so once again I can go on the pagination documentation of livewire and now I can say if on the first page then I need to disable it or I can simply create a button which is disabled so we can simply check this one so we can have one for if pagination is first page then do something else end it so if I am on the first page I need to do nothing when I click so there is no wire click and then I need the background of let's say gray 200 or 100 when we have when we are not on the first page then we are giving this previous one which is having a wire click let's try this so we have end of line so end if actually refresh and now you can see I am on the first page and this is looking like a disabled so I can remove the shadow also so that should be great flat yeah so it's now good so no and cursor:pointer also I can remove so it's not doing anything and it's now disabled and now I can click on next it's working but you can see it can go very long when we click on the next this means now we can do the same thing when we has no more pages so has more pages if we have if it has some pages then going to show this else do something else and then if and if so here comes the next one when we has some pages then show the next button which is having a wire click but if we don't have any pages then remove this click remove cursor:pointer background gray of 200 I will say and that's 200 for this previous also and that's good removing the shadow also and let's try once more and there is no previous page so there is no next page so next is disabled and now if I can go to previous previous previous yeah now it's there and now we are on the last page so as soon as we are on the last page you can see now next is disabled we can go with previous and previous is disabled Wow cool we have done that next work on the pages in between so one two three pages so first we need to loop over each one so each element so this one is for I can say previous and then I can say previous end here I can say next and here next end then I can start numbers and also we need to end the number so end numbers it's just for comment so that I can see where I am so end for each loop in between I need to have some links so I can firstly create a div inside dev I have an ally of one too and I can make this div or so that it will be inlined let's try refresh yeah one and two is there let's style these two class and this class has margin X of let's say two and yeah this is good let me design this also and I have just copied the same classes for previous and next and make it here one two and then what we need to do next we need to check if the element is a string that means just one so we need to show this one otherwise we need to loop over this so we need to check if it is an array so let's work on the array part so let's copy that and I can remove it and then I can paste it and let's we have this one we have designed and remove it like this and paste it like this okay so we have the page and we can use this page and we can show the page here show the page here let's see it's going to look 1 2 3 4 now how it's going to work when I click we need to go to a page once again there is a function called go to page and with a page number and remember I can use wire click go to page and it's with go to lower case and then I need to echo out the page so that it will give the number actually and now it's going to work so too is there so it's not working let's refresh and it's not working let's see why it's not working so go to pages there I can copy that and I can paste it which is there and yeah now it's working so that was having problem with the word go to okay so one is there do is there three four one and Yvonne is pre previous is disabled go to next working previous previous is not working let's open the dev tool and see why previous is not working it's not giving anything the cause of some problem wire click previous page we are having this hmm so we have some problem here we are on the fourth page this should work yeah it's working so that was I have not refreshed final is active one so you can see with the first page here we have with the current page is equal to the PHP are clicking then we need to make it background of blue 300 refresh and now you have that good so text white and blue of 500 cool so this is how we create the pagination on our level livewire pretty cool thing I think I like this one great let's work on next thing

Channel: Bitfumes

Views: 17,983

Keywords: laravel livewire, laravel livewire tutorial, laravel livewire crud, livewire crud, laravel livewire spa, laravel livewire examples, laravel livewire español, laravel livewire full course, laravel livewire autocomplete, laravel livewire course, laravel livewire introduction, laravel livewire quickstart, laravel livewire pagination, laravel livewire pagination link

Id: CTZw6cAyLFE

Length: 11min 14sec (674 seconds)

Published: Mon May 11 2020