Implement Multi-Column Sort Functionality | Lets Build Some Datatables With Laravel and Vue.js

so in our previous video we discussed about deleting single records deleting multiple records uh selecting multiple records from our table and also selecting all the records that we have on our database so in this video we'll be discussing about the sort functionality so sorting these records by multiple columns so before we get started i wanted to implement a small feature that i missed in the previous one that is whenever i select any record then i want to show a color of blue that is text color primary on the records that are selected for that let's go ahead to our video studio code and in here i want to define a function called okay let's define that here so i want to define a function called is checked which will receive a student id and here what i want to do is i want to return this dot checked dot includes so includes will check whether a certain record exists on that array or not so here i want to check whether the this student id that we are sending from us as a parameter exists on our checked array or not so if that exists then this condition will return true and if that doesn't exist then this will return false and depending on that we'll be applying uh class and to our prime to our table table row so let's go ahead and in our table row i want to display i want to apply a class so i want to apply a class in our table row and the way we apply the class is by using the class binding property so the class will be true if in our is checked function i need to pass the student dot id okay so if this condition is true then i wanna apply a class of table primary so this is a bootstrap class if that condition is false then i don't want to apply any of any class so the logic behind this is if the if the array consists of this student id then i want to apply the class of table primary and if it doesn't consist of that written id then i don't want to apply anything let's save that and go ahead and refresh our browser and when i select any of the classes then you can see whichever class i select then that records color changes to blue so primary color this is one of a small feature that we can add let's start by so the next thing that we'll be doing in this video is to apply is to sort these records so first let's go ahead and define two icons for each table that is the up arrow and the down arrow so whenever we select that arrow then we'll be toggling that sort order so let's go ahead to our table headers and in here i'll be defining two spans one for the up arrow and one for the down arrow and we and the code for defining an upper arrow is ampersand uar and for the down arrow is ampersand d-a-r-r so i'll just copy this old part and paste that on email and also for created at save that and let's see how it looks like so we have these arrows and now i also want to change these static headers to links so what i'll do is i'll just make an href tag and i'll just quickly replace these wrap this with href links so the idea behind this is whenever i click on this link then i want to toggle the sort order so the next step here is to define some properties so we'll be defining two properties that is thought direction and sort field so the sort direction will be ascending descending and the sort field will be the actual sort field that we have here like the phone number or address so for that let's go ahead and define dot direction we'll be keeping the uh few defaults here so let's keep the sort direction as descending and the sort field to be created at and now what we want to do is we'll be making an api request by passing these two values as well so we'll be manipulating the view later for now we'll be sorting the data along along with this with this value so we'll be sorting this data with this value so let's go ahead to our students get students property and here i want to pass those fields those values so sort direction will be this or direction so i'll just copy that and the sort field will be this sort field and we don't need this so now this will make an api request along with all these along with the with all the all of these parameters so now in our api.php okay in our studentcontroller.php where we have this index let's go ahead and grab these values so the sort direction will be request or direction so let's keep the default value as descending here as well and the sort field will be the request sort field and this will be created at by default and now when we are paginating and searching then what i want to do here is order by the sort so here we need to pass ascending or descending so this will be sort direction and the actual field is sort field so now this data will be sorted so here we'll be appending the order by query builder so the first parameter will be the sort field so we want to pass in the field that is created updated at all the fields that we have on the database and the next one is the sort direction now this will for in this case our data will be sorted in descending order by created at field let's go ahead and check that so if we go ahead and check that in our network tab as you can see we are making an api request to the student with the value of page s1 page in 8 of 10 query of empty query selected clause is empty selected section is empty the sort direction is descending and the sort field is created at so everything is working fine the only thing left here is to manipulate that value depending on the link that we select so the next step that we'll be doing here is whenever i click on any of these fields so if i click on student's name then i'm gonna sort student by his or her name i mean yeah then we want to sort the student by the student's name and we also need to toggle these toggle the order so when i click on this i wanna execute a function so for that let's go ahead to our student index dot view and in here let's define a function for the students dot name so here let's define the hash and at click dot prevent i want to execute a function called change sort and here i'll be passing the name of the field that i want to sort for so in this case i want to sort by student's name so we have the name as the column in the students table so i'll be passing the name and let's go ahead and define this function so in our methods let's define a new function that is change sort and this should be dynamic so this will be field and here what i want to do is i want to change the part field to field and then what i want to do is i want to get the students again don't forget to specify the this dot get students so let's save that and now since i've only implemented that function for the student's name then we should sort the data tables by student's name and in ascending and in descending order so remember the default is descending order if i click on student name and you can see the students are sorted in descending order by student's name so here what i want to do is i want to implement a few more if conditions so let me just cut that and i want to check here so if this dot sort field is equal equal to the field that we are getting as a parameter so the idea behind this is if the sort field that we are that we have in our data property is equal to the field that we are receiving as a parameter then in that case i only want to change the order so toggle the order so if we can use actually a storm internally operator so if this dot sort direction is equal equal to ascending then i want to change that to descending otherwise i want to change that to ascending so if the sort field is not equal equal to the field that we are receiving as a parameter then in that case i want to apply the sort field as the actual field and in the end we are executing the this dot gets students so we will fetch the students again now if i go ahead and reload the browser and then when i click on this guest student so if i click on student name then it should be top level so in this case it is in descending order it should be changed to ascending order and then the data should be sorted in uh sorted by student name in ascending order before now it is descending so if i click again and nothing's happening here what's the problem sort direction is equal to descending on sort field is name maybe we have some problem here so if this dot sort field is equal equal to sort field this dots our direction is equal equal to ascending asc then i want to change that to descending otherwise that will be ascending i forgot to mention one more thing that i want to assign this to the this dot sort direction so if the sort direction is ascending then we'll assign this.direction to descending otherwise ascending will be applied okay so let's save that and this should work fine now so let's go ahead and click on it now the data is all sorted in descending order if i click again the data i sort in ascending order so this is working fine and i want to implement that on all of the fields so the only thing that's left here to do is i need to copy this whole part and paste it on all of the fields so i'll just multi select these and okay i made a mistake let's copy all of these and paste that so this i only need to change the field here so the field will be email this will be address this will be phone number and this will be created at this should work perfectly fine so if i go ahead and sort it by email then we are seeing uh we can see that the email is sorted and descending and if i click again it is sorted by field as email and in ascending order so same for address phone number and created at one more thing that i want to implement here is i only want to show the currently sorted arrow so if these data are sorted by student's name and in descending order then i only want to show this arrow and hide all of the others for that we need to apply some if conditions so here i want to show this span if and only if the short direction is equal equal to okay or direction is equal to since this is the upper arrow so this will be descending and the sort field is name okay i'll just copy this and paste it on every span and here i want to change this to email address phone number and create it at and the last thing okay we made a small mistake here so we need to append a double equal here since this is an if condition so just multi select these and direction is equal equal to descending and don't really know what's the problem here so this will be equal equal as well okay so now this is working fine let's format that properly and one more thing that i need to do here is i need to change this to ascending this is the upper arrow save that and now let's go ahead and reload our browser so the default is created at in descending order so now if i click on student's name so now this is uh the students are sorted in descending order by name if i click again they are sorted in ascending order by name if i click on email then we are only seeing this arrow so this is working absolutely fine and i want to implement a simple check in our controller as well so let's go to our controller so here what i want to do is for the sort direction and sort field i want to check if in array let's define that and for the sort direction we'll be passing an array so in array for the sort direction we have ascending and we have descending so if we don't have a value of either ascending or descending so if we don't have that means we need to pass the exclamation if we don't have a value of either ascending or descending in the short direction that uh what i want to do is i want to make a default value of descending or short direction and for the the same thing applies for the sort field as well so we have multiple sort b sort fields so if you don't have a value of either name email address phone number that will be name i'll just copy this and paste that multiple times so name email address number and the last one is so if the sort field doesn't have any values that belonging belongs to this array then we'll set this uh default value as created at and the reason we are doing this is if someone goes to the apis checks the apis and then changes the value according to his own maybe he makes an api request instead of uh making it from here he goes to the browser and makes an api request and tries to manipulate the values in that case we want to set a few default values so for that we are checking that we don't get any errors while sorting sorting the data so for that reason we are setting a few defaults here so this should work perfectly fine now and let's give uh one last check if ugly comes with a name the students are prints are sorted in descending order by their name and by address okay by phone number okay by created at everything is working fine here so this much for this video and in the next one we'll be implementing the exports with excel and i hope you like this video so if you liked it do subscribe to the channel this is updated about future releases and i'll see you in the next one

Channel: Tapan Sharma

Views: 387

Keywords: vuejs, vue js tutorial, laravel vue.js, laravel tutorial, vue.js datatables, tapan sharma, laravel vue.js for beginners, laravel vue.js tutorial, laravel and vue.js datatables, sorting with laravel and vue.js, laravel, vue, multi column sorting with laravel and vue.js, sorting records with laravel, datatables sorting with laravel and vue.js, sort data in laravel, vuejs tutorial, vue js

Id: aNGXMe6lgDY

Length: 16min 49sec (1009 seconds)

Published: Sat Apr 17 2021