Lets Build Some Datatables With Laravel and Vue.js | Complete Tutorial

hey guys stephan sharma here it's been a while since i haven't uploaded any videos but i'm back with another tutorial series and in this series we'll be implementing the data tables using vgs and laravel so in the previous one we implemented some features uh using laravel and using laravel and livewire uh so we'll be implementing all of those features along with some extra ones which i'll be showing you in later in this video so we'll be doing all those features functionalities using vgs and so let's talk about what are the features that we'll be building here if you are new and or you if you haven't watched the laravel and live data table series then let's talk let's talk about what we what are the features that we'll be doing here so the first feature is the pagination feature as you can see we are displaying 10 records at a time and the data are loaded and without any page refreshes as you can see and i can also select the per page value here so if i select 20 then 20 records are displayed and will be also be implementing the feature filter by class feature so each student belongs to a certain class and a section so if i go ahead and select class one here then all the students students belonging to class one are displayed as you can see here and if i also select section a then only the students belonging to class 1 and section a are displayed here so let's remove this filter and we'll be also implementing the search functionality here so if i type in doctor and hit enter then all the words containing doctor are filtered are searched and displayed here so we'll be implementing the multi-column searching here so if i type in doctor that means it is currently searching uh this keyword in student's name email address and phone number so we'll be implementing the multi-column searching here and what else what we'll be doing here and yeah one more cool thing we'll be also be implementing the sort switch functionality here which we missed in the live word series so if i click on student's name then the data are sorted by inserted in ascending order if i click again then the data is uh displayed in descending order so deleting multiple single records this will be also be discussed in the video so we'll be so we'll also be implementing deleting single records and multiple records so if i go ahead and click on this button then we'll be showing a confirmation dialog and if i click on ok then we'll show a sweet toaster notification that the student has been deleted and that gets deleted from our database as well and we'll be implementing this multiple column multiple record selection so if i i can also select all of these records displayed in this page and we get a menu saying you have currently selected 10 items do you want to select all and if i click on select all then all of the data are selected as you can see the state is maintained here and with these records i can do whatever action i like like deleting and exporting these uh to the excel file or deleting this so we'll be implementing all of these features using vue.js and laravel so we will get to learn a lot of things in this series so in the next video we'll be talking about the setup what we what are the things that we need to do and we'll also be implementing the pagination in the first part so without any further delays let's get started so let's start by talking about our setup here so what i've done is i have a fresh installation of laravel and i have also defined a few models here for classes sections and student so each string belonging to a certain class in a section so if we go ahead and check our migration files as you can see we have a column called name for class and under sections we have class id belonging to so each section belongs to a certain class and name for this section and we have students table so each student belongs to a certain class and section and we have the name email address and phone number for that specific students and i have also defined a few seeders for classes sections and students so classes cedar has class one two three four five sections theorer has section a and section b for each class that is class one two three four five we'll have section a and b and students cedar i have created a factory for the students which will create 50 records so if you go ahead and check out our students factory then you can see we have name email phone number address class id and section id so for the class id and section id what we are doing here is we are randomly defining a class id between one and five and for the section id what we are doing is we are querying the section model where the class id is this class id and we'll get the first record and we'll set it to the section id and maybe one more thing that we need to do here is this will get the model we need to define the section id and the id okay this will work now let's go ahead and migrate our database so i have already defined a database if i created a database and defined now in an enb file what i'm gonna do here is i'll just do php artisan migrate fresh and i also want to run this seed our migration has been completed so if you go ahead and check our database as you can see we have class one two three four five sections a and b for each class and for the students we have 50 records containing uh all the necessary data along with their specific class and section id so this is working fine and the next thing okay let me just also show the students.blade.php file i have defined backend folder which consists of or studentsofblade.php and this is this consists of all the markup that we need in order to develop the data tables so if we go ahead and check our browser you can see that we are displaying this data tables here so we'll be replacing all these with our dynamic data fetching all the records from our database and we'll be implementing everything so our next step that we need to do is let's go to laravel ui and we'll install this package in order to install the view so we'll be using laravel ui in order to install view so i'll just copy this and is that in a command line hit enter and i'll be right back once this finishes installing laravel ui has been successfully installed and our next step is to create the scaffolding for view let's go ahead and copy and paste that here so the scaffolding has been done and our next step is i'll just quickly install the npm run the npm install and npm run dev and be right back so i have successfully executed the npm install command and let's go ahead and run the npo run dev hit enter and it finished but we need to run mix again so what we can now actually do is run again npm run dev and this time it will compile successfully so it will give an error for the first time so keep that in mind and the compilation has been successful so now let's go ahead and in our students.blade.php what we can do is in order to test our app what we can do is since we have a component since we have example component and it is registered as example component in our app.js what we can actually do is in our student.php let's keep that let's call that example component save that and let's go ahead and reload our browser okay one more thing that we need to do is let's go ahead and we need to define an id of app in our main root element so okay this is done and the next thing that we need to do is let's go to the master.blade.php and on the bottom we need to we also need to call the app.js file since this is the file that is actually so in our public js app.js this is the file that is actually get compiled to we need to call that app.js file yes with js and app.js if that let's go ahead and reload our browser once again and this time view gs is detected as you can see we are seeing the example component here and in our view tab okay i don't see that view tab here so in order to use the pagination feature uh first let's go ahead and define the routes for this so what we need to do is let's go to the routes and api.php and define a route student controller class and on the index page index function let's go to the student controller and define uh here what i want to do is i'm going to get all the students and in here we'll be using api resources to format our data so let's go ahead in our terminal and create a resource name it student resource and maybe we also need to provide uh i don't remember okay we don't need it maybe okay let's create that the resource has been created so in our resources during resource what we are gonna do here is let's customize this a little bit so we'll be sending the name as this name so the reason we are doing this here is that i want to display the class and section for the specific student so i want to format that and also format the created add date here the name the email address number and section so this section and name so we haven't defined the relation yet the class will be this class name so now what we need to okay we also need to send the id so don't forget to send the student id so this will be needed when we are looping in the looping to each of the students using for loop in view js so this id will be the unique identifier for each data now let's go to the student model in our student dot php let's define two functions two relations so the first will be classes return this belongs to classes class and we also need to specify the foreign key since we have different table uh different model name and the different foreign keys so we need to specify that and for this section will be okay i think we can actually define this as class and we want to return this belongs to section class and we don't need the foreign key here so in our student controller since we are getting all the students then i want to return the student resource collection with the value of students okay now let's go ahead and test this out you know api.php when we hit the slash api students route we want to go to the student controller class on the index function so in the student controller what we are doing is we are fetching all the students and what we can actually do here is we can also perform the eager loading so we i want to get all the students along with their class and section and i want to get these records okay so let's go ahead and test this on our browser what we can actually do is we can go here and append an api students okay we are getting all the data so i should use actually use postman but it's fine it's fine for now let's go ahead and now display this records here so let's define a new component viewjs component that will be called as students index so okay we can define that in the components folder itself it's up to you where we want to define you can actually create a different folder for each student a different folder for students and another photo for another model so that makes it quite easy and students index dot view so this would be this will be our v file and first let's go ahead and register this in our app.js what i'll do is i'll just copy this line and define it as students index which is inside and one more thing that i want to do here is i will rename this to capital letters and write in camel case format okay so now it is inside slash components last students index dot view dot default let's save that and everything should work fine let me just remove these and in our students art students index dot view let's define a new template for view and let's also define the script no it's not this ripped javascript dot view and here what i want what i'm going to do is i'm going to copy this whole div got this whole div and paste that in our template save and maybe we need to remove this comments this will be imagination links that we'll be using later and everything should work fine save that and okay we don't need the javascript part for now since we are only testing whether it's working or not and we need to define we need to call the students index v file let's save that and don't forget to run the java let's run the npm run dev or we can even run npm run watch so our javascript has been compiled and let's go ahead and check that on our browser so everything is working as usual and if you go ahead and inspect again we have that problem okay we have view and we have the students index component so since we haven't defined any data or methods here so this is empty for now so let's go ahead and define some data properties or in our vgs file so for that let's go to the students index and in here i want to define a data property which is gonna be a function and it's gonna return an object so here what i'm gonna do is i'm gonna define a property called students which is gonna be an empty object and the next step that we'll be doing here is whenever the component is mounted what i want to do is i want to call the xcos request here so xus is available globally on every view component so we don't need to import that so i want to call the flash api slash students route and making some mistakes okay so this is gonna make the api request to slash api student and then what i'm going to do is we'll receive a response and when i receive that response then what i want to do is i want to store that data in our students data property so this student is going to be response dot data is going to be the default and since the since we are using the resource api resources then what it's going to do is it is going to wrap our records in the data root element so for that what we need to do is we need to append one more data here so let's save that and let's go to the browser and reload once again everything is working as expected as usual so if you go ahead and check this student index then you can see we have a student's object with a value of 50 items so each object having all the required records as you can see we have address class email id name phone number and section everything is working fine so in order to display these data in the data table what we need to do is we need to loop through each of these so here what i'm gonna do is okay let's loop so v for students student in and since we are using for loop then i i need to specify a key so that will be student dot id and make sure to spell that correctly now what we need to do is we need to specify all of these properties here so this will be student dot name let me just copy this and this one will be section save that and let's go ahead and again reload our browser and everything should work as expected and as you can see we have a record students record being displayed here so everything is working properly now one more thing that is the created app since we are since okay we haven't we are not passing the created ad in our api resource probably so you know student resource what we need to do is we nee all we also need the created at and let's format this properly this will be this created at and what i want to do is i want to format this to date formatted date string maybe i just forgot what it was we'll just check it okay it's good so we can actually apply all of the laravel related stops here which will which we can manipulate and show it in the front end so this is quite good and now the only thing that we are here for is the pagination using view so for that what we need to do is we need to install a package called laravel view pagination so this is a npm package for that let's go ahead and install this a lot of will view pagination open our terminal okay let's create a new one npm install lara will be pagination and i'll be right back once this finishes installing so the laravel view imagination package has been installed successfully and the next step that we need to do is we need to register that component let's go ahead and copy that in our app.js save that paste that and in order to use that component we can save this and in order to use that component what we need to do is we need to define this pagination and send the data and pagination function so here let's go to the students index and inside this div i'm going gonna paste that and our data will be students and on pagination change page we need to execute a function so this will be let's define new function called get students and let's define that this will be methods which is going to be a function and here i want to call a new function [Music] that is get students and i want to call this function in our guest students method let's format that and on the mounted what i want to do is i want to call get students method now everything should work as expected so imagination we are sending the data as students since we have a student's data and on every pagination change page what i want to do is i want to call the guest students i want to call the guest students method and okay one more thing that we need to do is i think there's an error here we need to send a parameter of page which will be one by default and the methods is gonna be an object not a function and one more thing that is since we are paginating so what we need to do is we need to specify the parameter as page as you can see in here it's mentioned so on the method since we are using the get results it gets gets a parameter of page so every time it calls the translation change page is gonna call the get results and send the pagination value so if the page is 2 then it will send the parameter as parameter value is 2 and if the page is 3 then it will send the parameter value is 3 and i want to go to example results and p is equal to this page so i need to call that here the page will be page save that and in our student controller we also need to perform the pagination so this will be paginate and i wanna i wanna fetch 10 records at a time so let's go ahead and reload our browser everything should work fine and okay there's a problem on the pagination part let's go ahead and check out invalid prop type check fail for prop data expected object got array okay i found the bug so since we were doing response.data.data so that was the problem so what we need to do is we only need to send the response.data and everything else will be done by this package so what we can do here is we can remove this extra line of data here and now if we go ahead and reload our browser everything should work as expected but we don't see any results so what's the problem we have a data of 10 okay what we also need to do is now here we need to specify the student start data like that and reload again so now everything should work fine and if i click on second page then the data are reloaded and without ready page refreshes as you can see so the last thing that we need to do in this video is to change the pagination values depending on this value so let's go ahead and define the property here so the first thing that we need is a data property called paginate so this will be 10 by default and on our paginate select tag where's that okay we have that here so select what we want to do is we want to remodel this with the paginate let's save that and let's check it everything is working fine or not so we have view we have paginate which is 10 if i go ahead and change that to 20 that gets 20 so our v model is working fine so now what we can do is we'll be sending that paginate value to our api so here what we can do is let's send that imaginate equal to imaginate okay this paginate we need we can actually use the request function here so let's go ahead and define that paginate value so we'll be receiving that in the request paginate property so if we don't get any value then we'll be using 10 by default and here now we can actually use this fashionate so it will be 10 by default and if we whenever we change that from our view application that will make a new api request and then this value will be updated and according to that we'll get the student's record one more thing that we need to do is we need to watch for this paginate property where's that so whenever this paginate property changes will be executing another function so we need to watch for this paginate property so let's define a watcher and this is gonna be a function i think okay this is not gonna be a function this is a object so we are gonna watch for the paginate so whenever the passionate value changes will be exerting the function called so what we want to do here is we want to fetch the students again so what we can actually do is we can all the get students method here so what it is going to do is uh since we are watching for the paginate property so every time this page you need value changes then this getstudents function will be called and here what we are doing is uh we are by default sending the page as one and since we have the val since we have the v model we we are binding this with the passionate value so we don't need to send anything from here so this will be set by uh set to 20 30 10 by default and according to that our data will be paginated so for on every change this will this function will be called and according to the according to that we'll get the records on our front end so now everything should work as expected so if we save and reload our browser now we are getting 10 records by default if i go ahead and go ahead and change that to 20 then i should see 20 records but it's not working here so we have a value of 508 as 20 and maybe this is not working okay i made a silly mistake here that is we need to append a ampersand here [Music] and let's go ahead and reload our browser once again so the way i knew that error is because i checked on the network tab and the ampersand was missing here so now again let's take it once again last time and if i go ahead and change that to 20 then we should see 20 records and yes everything is working fine this much for this video so in the next part we'll be implementing the search feature so in this video we'll be working on implementing the search feature so whenever the user types in something uh we'll be searching through multiple columns like the student's name email address phone number and we'll be also and we'll also be implementing the relationship searching through the relationship so the user can also type the certain class in section and search for those and search for those related students so let's go ahead to our visual studio code and define a property it's a search property so for that let's go to the script part and define a search variable which will be empty by default and let's model it in our input which is okay let me just collapse these so our pagination part has been done and we also don't need this for now so this is the search so let's remodel this with the search variable this is done save that and okay let's go ahead and reload our browser and see whether our v model is working or not so if i go ahead and so search is empty if i go ahead and type name then as you can see it is reflected here so everything is working fine and now what we need to do is you know get students model let's duplicate these and here what i want to send is i want to send a variable called q and then i want to send the search value on these parameters so we are sending the get request and here i'm sending the query so now let's go to our controller and let's receive that value so we can name that as search term will be request with the value of q and that will be empty by default and now what we need to do is i'll be using scopes here so defining a scope on the model and then calling that scope on the query so while we are quitting we'll be using that scope to search through the database so let's go ahead to our models student.php and define a function so scopes are generally prefixed with the value scope and then the actual search term so in this case i'll be using search and this will receive two parameters the first is the query and the second is the term itself so we will be using that query builder to query through our databases query to the students table so here what i want to do is the first thing that i want to do here is i want to wrap our search term with the percentage signed so that it will search for the similar names like the dom and now the next thing that we need to do is i want to use the query and let's make a wear request so where and we'll be passing a closer here not this but a function which is going to receive the query itself and i also want to use the term and here what i want to do is i want to search through the database query where the name is like our thumb and let's change this to multiple columns and okay i made a mistake so here we can also append or where since we are searching through multiple columns so or where i want to search through the email so the email is like this term and now let's also search to the address search through the own number and in order to search to the relationships what we need to do is we can use our where has so or where has is gonna receive of the first parameter which is the relationship name and the second parameter we are gonna pass a function just like above so function this is going to receive the query as a parameter and i also want to use the dom and let's wrap this inside the brackets and here i want to run the query so now we are inside the relationship instance so inside the class model so here we can append or where clauses like this so for now i'm gonna what i'm gonna do is i'm gonna search through the name so the name the class i'm gonna search the class name the name is like this search term and okay we need the semicolon here and i'm gonna append one more so what i'm gonna do is i'll just copy this remove this and i want to search through this section as well so or where has the section function is function query use term the name is like this term so this should work fine let's save that and so this is gonna return so query where so this is gonna actually automatically return all the values that this executes and in our students controller now what we can do is we can actually call these queryscope by its name since we defined it as scope search so we can actually call the search function and let's pass that search term i'm using the trim function here so what it is basically gonna do is it will remove all the white spaces from our term and then and it will and we'll pass that down to our search scope so now let's go ahead and see that in action you know students are index dot view what we are doing is we are calling the get student function and in here we are passing a query as query we are passing a query parameter with the value of this search so whatever we have in our input search will be passing that in our query parameter and in our studentscontroller.php we are receiving that parameter as a search term and then passing that to a scope so this is this scope is a function and this function is being executed in our model where we are running the query so query where the name is like this term or where the email is like this term so the receipt parameter or the address or phone number or the class so we are searching through a relationship here so we need to define the relationship clause and section as you can see we have the class and section so this is gonna search through the class and section so respect class and section table and it is going to search the name but the name is like the received parameter and then it is going to return all the records automatically so we don't need to do anything uh returning the returning part is all automatically done so now what we can do is let's go ahead in our browser so we have one more thing we need to implement and i want to show you the network tab here so if i type in something and enter okay this is not going to do anything so what we need one more thing that we need to do here is whenever we make any changes to our search term where's that so whenever we make any changes to this search value then we want to run a function so in order to run that function we need we need to watch through this search property so for that let's go to our watchers so we have a watch implemented for the paginate the next one is for the search so the the way we define a watcher is by actually calling the property name so this is gonna receive the value but we don't need that so here what we will be doing is we'll again call the get students function so whenever the any value in the search property changes then we will be calling this getstudent function and it is going to execute this api call and then when they when we receive the response then it is going to assign those values to the students property that we have defined in our view so this should work fine and we have an error here i don't know what kind of error is this audio not found error can't resolve view editor bridge in c users okay so we had an error where i when i was writing the function then it imported an func function package or i don't know what is this but we need to remove this and yeah let's save that and everything should work fine now let's go ahead and reload our browser and now when i type the pose mr then here is gonna search through all the fields and return the matching values so let's test some more things so if i type in atom then it's gonna returning the query return a query searching through the email values that match with the email field let's type two five zero four zero four one that's working let's type 585 working and also let's also check out the relationship searching so if i type in class one then okay we are getting all the values that belong to class one and let's also type section a and we are getting all the values of section a okay that's good that's working fine so our search functionality is working fine and one more thing that i want to implement here is since we are making so many requests to the server while we are searching through the relationship so while we are searching through the data tables so what i want to do here is we can actually do one thing that is we can use bind that with a value called vmod dot lazy so what it is it will basically do is if i go ahead and now if i go ahead and and type in class 1 then any change in the input field will make a api request so if i type in now if i type enter then it is going to make a make an api request instead of making an api request on every keystroke so this drastically reduces the amount of requests we send to the server and yeah that's one of the optimization that we can implement so this was it for this video and in the next video we'll be working on filtering the data filtering the students by class and section so stay tuned for that and i'll see you in the next one so in this video we'll be implementing the filter functions filtering by class and section so what we want to do here is we want to display all of the classes available in our database so for that what we need to do is we need to query the classes table and display the classes using for each loop so let's define the routes and all the necessary things that we that we need to do so let's go ahead and do that so for that let's open up our real studio code and let's go ahead and in order to display these classes let's go ahead to our api.php and let's define a new route with classes and we have classes controller and we need to go to the index so let's go ahead to the classes controller go to the let's create a function called index and here let's define the resource for class as well so api resource for class so php artisan make resource classes resource that's done let's let's go to this and okay we don't need to do anything here so now let's query all of the classes so classes classes all and return process resource collection classes let's save that now let's go to the okay let's go ahead and check that in our browser so if i go ahead and type in classes then we should get all of the classes so we need to call the api and then classes so we are getting all the classes here so let's go ahead in our students index dot view and let's define new property called classes which will be empty by default and what we want to do is on the mounted function we will be calling the excels dot get to slash api slash classes and then what we are gonna do here is we'll be receiving the response and what we want to do here is assign the receive values to these classes so that will be response dot data dot data let's save that and if we go ahead and reload our browser check the view tab we have classes and the object is empty why is that mounted we are calling the dpi slash classes then response okay let's risk console.log the response so we are getting data dot data we have array of five okay it's working fine actually it took a bit of time to load that again if you go ahead and reload and as you can see we have five arrays with the respective values so now what we can do is since we have these classes let's go ahead in our select tag for classes and let's loop through each of these so option v4 class in classes and we also need to call the key here so the key will be class dot id and okay we are still getting this error i don't know why unexpected keyword okay let's remove that keyword and keep that as item before item in classes and okay we also need to change that to item the value will be item dot id and we need to bind that and the actual output would be item dot name so let's save that and go ahead and reload our browser everything should work as expected so yes it takes a bit of time to make that api request so now we have class one two three four five and we also need to define one more property that is the selected class so if i go ahead and select class one then i want a wire model a not wire model but v model this to a certain property so that i should know which class has been selected and then depending on that i would query the sections table for that let's go ahead to our students index view and define one more property that is selected class and this will be null by default and let's remodel this in our option tag so we have that here so select we model this with the selected class and now if i go ahead and reload my browser pull this up student index we have selected classes null and if i select class one then as you can see we have selected class as id since we have the value of id of class id according to that we get the we get the value assigned to the selected class and we also need to define a watcher so whenever i change that selected class so whenever that selected class changes then i want to make a query or i want to execute a function so here let's define this watcher for selected class and we have a function which is going to receive the value and here also we are going to call the get students properties since uh whenever any value changes uh whenever the value of the selected class changes then we want to query the get students then we want to query the database and get all the students belonging to that certain class so i hope you get the idea and now what we will be doing here is i'll send another query parameter of selected class and this will be this selected class so i'll be implementing this first and then it will be same for the selected section as well so let's save that and now we have the selected class value in our student controller so here we have the selected class which will be request selected class and now what we can do is whenever there's a value so we can actually append when so whenever a certain value is set so if this selected class value has a certain value selected class variable has a certain value then we will be querying the database so we can actually pass the when condition per parameter here when conditional clause so whenever a certain value like selected class is set then we want to execute that query so here what we'll be doing is we'll be passing that selected class value so when this selected class is set then you want to call a function which is going to get the parameter or query and we also need to use the selected class since we are we'll be using that selected class to query our database and here we need to wrap this inside brackets and we'll be executing the function where we'll be using the query and use the where clause here where the class id so here we are inside the students model students table and will be requiring the database where the class id is equal to this selected class okay and since we are here what we can also do is let's copy this selected class and define the same for the selected section as well and in here we can duplicate this query and when the selected section is set then what we want to do is we also need to query the section id so where the section id is this selected section and now let's go to our browser and reload okay we have an error here and we don't see any error here but we probably need to debug what's going on and the reason we are not getting any data here is because since we have a selected class of null so what we can do here is instead of passing a null value let's pass an empty string so now it should work i don't really know the exact reason for this but this will pass an empty string to the api request here so this will be an empty string and in our student controller this will be set to null maybe that's the mechanism that's going on here so now if you go ahead and reload our browser everything should work as expected so now we need to implement the dependent drop down so when i select class one then i should see the sections of class one yeah i should see the sections of class one so let's go ahead and in our students index dot view what we are doing is we are watching for the selected class that means let's also define a new property called selected section section that will be empty by default and also define a new property called sections which will be empty by default so since we have defined these two properties we also need to create an api to make the request to the sections so we have we need to define sections so we will we want to get all the sections of a specific class and let's go to sections controller index so we have that sections controller okay we don't have maybe we have section controller so that's inside section controller okay for some reason this is not working go to the section controller and define a function called index and we can get the class id using the request object let's define as class id and we want to get all the sections where the class id is this class id let's get these and let's return okay let's also define uh api resource for section sections resource so we have that and we don't need to do anything here as well so we'll just return sections resource collection with these sections save that and we need to make api call from the view part so for that so on change of a selected class what i want to do here is okay since we have in the get students what we can do here is we'll be passing the selected section as well so did we do the v model part we didn't okay we need to make the api request to get all the section first and then we'll do the v model part later so whenever the selected class changes then i wanna make a exeos request to slash api slash sections and i also need to pass the class id so that will be class okay we don't need the and here we can actually send the class id like this with a question mark will be equal to this dot selected class and then we get a response where i wanna store those in my sections property which will be inside response dot data dot data let's save that and on the section controller so we have index so this will so whenever we hit this api route so slash eps sections and with the value of class id is this selected class then we hit this dot php on the api section which will go to section controller at their index function and insert section controller what we are doing is we are grabbing the class id so if there is nothing let's keep that to null and we want to get the sections where the class id is this class id and get and then we are returning a section resource collection with these sections and then what we are doing is on the students index.view we are assigning those values to the sections property now if we go ahead and reload our browser [Music] and let's inspect the students index so for now we have section object as empty and when i go ahead and change that to class 2 then we have selected classes 2 and we have selected section as empty but ok we also have the sections as empty that shouldn't be the case selected section is empty okay that's fine but we have sections so let's debug what's actually happening so we are getting x0's dot get api's last sections for class id is this selected class and then we get the response so let's console dot log the response save that let's check out our console if i select class 4 then we are getting a 500 internal server error fps last sections question mark class id equal to four five and internal server error request field so i had an import error on my api.php i didn't import the section controller so for that i was getting an error so what i did was in order to debug this what i did was in our students index i made a call to slash apis less sections with the class id of this selected class and the response is console.log the response and in this section controller in order to check whether i was getting the correct class id or not i just return the class id and now if i go ahead and reload the browser and select class one then i should see data with the value of 1 here so this is now actually working fine so i just properly imported the section controller in my api.php now what we can actually do is instead of returning the class id we can query the sections and then return the sections and on the students index.view instead of console logging this what we can do is we can assign these values to the sections save that and once again reload the browser now if i if we go ahead and check the view tab on the students index we have empty object for sections so if i go ahead and checked check the class 2 then we get two iras two of two items for sections so one is section a and the another one is give us that so section b so now what we can do is we can loop through these in our select tag for sections so let's loop through option v or section and sections we need to pass the key as section dot id the value will be so we need to bind this the value will be section dot dot id and in order to display the actual value what we need to do here is we need the section dot name let's save that and again go ahead and reload our browser select class 2 then as you can see we have section a and b for class three so one more thing that we can do here is if we don't select any class then we can actually hide this so v if we don't have any selected class i think this should work fine so if the selected class is selected class has a certain value then we want to show this poll if otherwise we'll be hiding it save that and reload our browser so now we are only seeing the filter by class option if i go ahead and select class 2 then we see the option for section so if i we can now again select the section in order to filter by section so let's do one more thing let's remodel this to the selected section so we have already defined the selected section property here so this is to in order to filter the student by class and section once we once the students select a certain section then we will be watching this selected section property and depending on that we'll be making api request so we have defined the selected section property in the data so let's watch for the selected section so this will be similar to the selected class but so this will be selected section and this will execute a function which is going to receive a value which we don't need so here what we are going to do is we are only going to run the get student property and inside get student what we'll be doing is we'll be passing the selected section so the selector section will be this selected section and this will be this will go to the student controller and here we have selected section where the will be getting the value through the request object and when this value is selected then we want to query our database our students table where the section id is this selected section so now everything should work as expected so if i go ahead and select class one then all the students belonging to class one are displayed and we don't have any class belonging to we don't have any student belonging to section b so if i select section a then all the data should be retained and if i go ahead and select section b then we should get an empty array so yeah this one's working fine so this much for this video and i hope you like the content and in the next one we'll be talking about the multi-select feature so selecting multiple records and deleting these records bulk delete and single delete and also showing your toaster notification that the records were deleted so all those features will be discussing in the next one so stay tuned and i'll see you in the next one so in this fourth part of our view data table series will be implementing features like selecting multiple columns so i can select these records and then with these i can perform operations like delete and export so in this part we'll be implementing selecting multiple records and deleting those multiple records in the another part we'll be discussing about exporting these let's start by deleting single records from the database so for that let's open up our visual studio code and we have a delete button here for every single record so we have a button and on click what i want to do here is delete let's define a function called delete single record and let's pass in the student id and let's go ahead and define that function we have selected section i think these are watchers so on the methods let's define that here delete single record this will receive the student id and here we need to we also need to define api route so let's go ahead in our api.php and this will be of type delete and we'll be using route model binding route delete student slash student and here i want to go to student controller class and the function that i want to call is destroy since you are deleting a single record and let's also define another prefix or delete so you can actually do whatever you like whatever you are comfortable with so now let's go to the student controller and define a function called destroy so here we'll be getting that student and what i'm gonna do here is let's return the student id in order to check whether okay let's just send the id in order to check whether our code is working or not so now in our api in our students index.view what we can do is we can make an api request to xcos dot delete and our route will be slash api slash student slash delete slash and the id of the student so this will be student id and then what we can do is so since we will be getting the response here what i want to do is let's just console.log this value console.log response dot data save that and we have the npm run watch for running and now if i go ahead and reload our browser enter ctrl shift i to open up our inspector inspect we open up our bacteria website inspector and now let's open up the console so we have some property error converted property function of undefined okay that's the bootstrap error so let that be and now if i go ahead and click on delete then i'm getting the id of one if i go ahead and click on delete for another button then i'm getting the id of two so our code is working fine and the only thing that we need to do here in our api in our studentcontroller.php is we can actually delete the student so student delete and here what i want to do is i'm going to return a response with no content this will send the status as 200 and the body will be empty so here what we want to do is when we execute that function when we get that response then i want to fetch the students again in order to refresh our table so save that and now if we go ahead and reload our browser and if i click on delete for the first record then this should be deleted from the database and the data table should be refreshed so yeah our code is working fine so it would be a nice feature if we could uh give our use feedback to the user that the student was deleted successfully for that what we'll be doing is we'll be using a package called view toast notification so for that let me just copy this code and open up in our terminal open up our terminal and i'll just install this package and i'll be right back so the package has been installed successfully as you can see and in order to use this what i need to do is i need to import that from the package from the npm module in our app.js so we have that here and let's paste that and we also need okay we need to import our default theme let's copy and save that as well and we don't need anything else here so this is fine so in order to use this uh toaster notification what we can do is let's go to our visual studio code and when we get the response then here what i want to do is this dot post dot success and here i want to pass a message that says student deleted successfully let's check whether this is fine okay this looks good let's save that and now if we go ahead and reload our browser and when i delete a single record we are getting an error that unknown type error cannot be probably success of undefined what's the error here okay i forgot to specify one more thing that is view dot use view toast which will be in our app.js so here we could we need to define this and one more thing that is i want to specify here i want to specify a position here so for that let's go ahead and pass in an object the position that i want to place is on the top right say that and now one last time if we go ahead and reload our browser and when i click on delete then we get a two cent notification that the student was deleted successfully okay this looks good so our single file deleting feature is working fine single record deleting feature is working and our next step is i wanna implement this selecting multiple check boxes from our data tables let's go ahead in our student index.view and define a new property so on that property i want to store all the ids of the students all the ids of the checked students for that let's define an array or maybe you could also define an object but array will also work fine so we have an array select array so we'll be storing all the ids of the students that are checked and let's wire model this with our input type of checkbox so here the value will be student dot id and let's remodel this with our checked property and notice one more thing that views yes is so awesome that whenever we remodel any input type of checkbox with an array then whatever we check through in the loop so let me just show you what's what it will actually do here so let me open the view depth tools and open up student index so i have a checked array which is empty uh currently so now if i go ahead and check this array okay this is a problem because it should be we should bind it so we should specify that colon go ahead and reload again and open up the dev tools we have a checked with an array empty array if i go ahead and click on this item then we you can see that we have an array which is with the id of five if i click again then the array increases so it automatically performs the updating of the array whenever we select these check boxes so our v model property is working absolutely fine and now what i want to do is whenever i select on any of the check box then i want to show this button with these options for that let's go ahead on the checked we checked button here and i want to show this so we'll be using v if if the length of the checked array is greater than zero to save that and now since we our checked array is empty then we won't see the checkbox and if i select on any of the item then the checkbox is visible and see as you can see since we are using javascript so there's no any request to the server which basically which generally happens in the live wire the view is much faster efficient in terms of these kinds of operations in comparison to live wire so now here what i want to do is i want to show the count of the checked items so that will be checked dot length and whenever i select these items then the count of that then the counter also increases so that's kind of cool and now what i want to do is i want to delete the items that are checked before that when i click on delete then i want to execute a function whenever i click on this link then i want to execute a function called delete records and since this this is an a tag i also want to do is i want to prevent the default behavior of the href tag so this will execute the delete records method and let's go ahead and define that function so in our methods i'm going to define another function called lead records so here i want to make an api request so that will be xeos dot delete i want to make an api request to slash api slash students flash pass destroy since we are deleting multiple records and here i want to pass the ids of the students so i can actually pass the array and then we get a response so if the response dots status is equal equal to 204 then what i want to do is i want to show a message let's show a toaster notification dot success that selected students were deleted successfully and we also need to execute the this get students method here as well so let's save that and let's go ahead and define the api students last mass destroy api so in our api.php we can actually copy this to apr students mass destroy and we get an area of students so which i want to go to mass destroy function let's save that and go to the student controller and define that function and we get an array of students so here what i want to do is i'll just write a write a log about the received students we can actually return it but okay it's fine what i'll do is i'll just go to the storage logs and laravel.log let me just clear everything from here save that and okay since you're only logging these students so i wanna i'm doing this thing because uh whenever we send an array from our parameters then what we'll do is in it will convert it it won't actually send the array but we'll it will send the values as strings so let me just show you what i'm actually trying to say so whenever i select multiple items let me just select three items and when i click on delete then if you go ahead now into our laravel.log then you can see we are only getting 567 as as value of string type so this is not an array so we get a string type value so you know we need to convert this to an array type and then delete these delete the students which has these ids from our database for that what we need to do is we need to convert so we have a function we have a function called x load that takes the separator as the first argument and the students the string as the second argument and we want to store that in in a variable called students array and the way we delete these records is by calling student where key is this array and this is actually where condition this will search through the students table where the key matches with this student's array the ids that exist on this student array will be fetched and then we want to delete those records so now those students are deleted and let's send an http response of no content so now everything should we will be working fine so you know api.php what we are doing is we are actually executing uh we are defining a new api for students must destroy and we get the students as a parameter which goes to student controller and must destroy so here what we are doing is we get the student array as an string as a string of comma separated values then we are converting that to an array and then we are querying the students model where the key matches with this student's array and then delete those records and then we are returning a response of no content so no content means we are sending a status of 204 and then in our student.index view what we are doing is we are making an api request to del uh api requests to api student mouse destroy and passing the checked array and then we get the response it so the response drop status is equal equal to 204 then we show a toaster notification that selected students were deleted successfully and then we are fetching the students again so if the status is not 204 or if there's something another message like if we get a response of 500 then we can sue another message saying that something went wrong and we can actually show the error message so for now everything should work fine as i've already tested this so let's go ahead and test it again so we have three records so the first one is enabled so keep that in mind so take care of that so if i go ahead and delete this then we see that these students were deleted successfully so we are still seeing the we checked value here we checked button here so for that what we need to do is whenever we get a success message success response then what i want to do is i want to reassign that array to an empty array now everything should work fine if i go ahead and select two records and delete then those records are deleted from the database we have uh we reassign the checked array to an empty array and everything works absolutely fine so now the next thing that i want to do here is when i select when i check or check the this array this check box then i want to select all of the records from this table so for that what we need to do is let's go ahead in our so we have that in our input type of checkbox this is the one that we need to work on so let's remodel this with the with a new property called select page so when this when the check box is checked then that value will be set to true and if it is not checked then that value would be set to false so let's go ahead and define the select page property so this will be false by default and if you go ahead and check that in our browser so we have select page as false and if i select this then this value changes to true as you can see here now when the select page value changes so in order to track that we need to define a watcher let's define a watcher for the select page so whenever this value changes then what i want to do is so if this value is true then what i want to do is i want to loop through the students so this.students.data dot for each maybe this is the actual syntax for for each and for each student what i want to do is i want to push the student id to our checked array so here in order to push the checked student id to our checked array we have the push function so here i want to push the student id to our checked array so we are looping through the data and then we are pushing the array checked we are pushing the student id with the checked array so let's go ahead and test this out so now if i select this as you can see all the records from this page are selected and when i uncheck this then whatever and then i want to uncheck all of the records before that we have else condition so when the this value is false then we'll be executing the else condition in that case i want to empty that array so this dot checked will be an empty array now let's go ahead and save that and reload our browser again now if i select this then all the records are selected and if i again select this then that value will be so this value will be set to false and will be will have an empty array we have will have an empty checked array yeah everything is working perfectly fine so our next step is what we're gonna do here the next step will be okay one last final thing that i want to do here is when i select this item then i want to show a menu that you are selecting currently selecting this much of items and you want to select all and when i click on select all then i want to select all of the items so for now as you can see we are not selecting all the items we are only selecting 10 items so i'll be implementing that feature so let's start working on it so in order to show a message that we are currently selecting this number of items let's go ahead in our visual studio code and let me show where the code is where that part is so here we have this div so i want to wrap that inside another div and okay maybe we don't need to wrap this so i want to show this div if and only if the select page property is true [Music] so let's go ahead and reload and when i select these items then i don't see that message but when i select this check box then i can see then as you can see we are seeing this you are currently selecting all 10 items and here i want to show the count of the items that are being selected so for that we could use the length of the checked array so this okay we don't need this checked dot length let's say that this is not check box this is checked dot length and resolute once again and as you can see we are seeing you are currently selecting all 10 items then also one implement this feature so if we click on you have selected you are currently selecting 10 items all 10 items okay we have selected 10 address do you want to select all so when i click on this button then i want to show this message and when i click on the select all then i want to show this message okay so for that it got a bit of mismatch maybe okay we also need to define one more property that is select all so when i click on select all then i want to turn the then i want to make the select all value to true so if the select all properties set to true then i want to show that you are going to be selecting all then okay we i want to show all the values of the all the i want to show the count of the all the items so for that i'll just implement that later but here it will be v else so if the select all is empty or if the select all is set to false then i want to show this vls condition and i want to show all of these only if the select page is set to true so for that let's wrap that inside a div and okay we don't need that since you have a wave in here i can actually use that vf select page so if select piece is set to true then we'll be executing this function and if the select all is set to false then we'll be showing this message and if the select all is set to true then we'll be showing this message so now let's go ahead and test it out so if i select these items so if i select the check box then you can see that you have selected all 10 10 items you want to select all 25 and when i click click on the select all so we have that where's that okay we have selected 10 items you want to select all okay we have that here so what i want to do here is at click dot prevent i wanna execute a function called select all records we can define a function for select all since obvi i already have a property named select all let's save that and define that function let's define that here select all records and here what i want to do is i'll just change the value of select all true so what it will do is it will change the value of select all to true and the message that will be showing here will change so now only thing that we need to do is we need to show the count of the items and also select all of the items in our data table so for that so the next step that i want to do here is i want to show a total total of the student item here so you are currently selecting so this is fine this will display the length of the currently current page so total records of the current page but what if what if you want to get all the records all the count of the records that we are that we actually have on the database so for that what i'm going to show here is i'll be showing the students index and in here as you can see we have the students we have the students property and in that we have meta data so in here as you can see we have quite a few properties here so current page from last page links page per page 2 and we have a value we have a property called total so we can actually use this total variable on the total in order to display the total records so you have uh selected in here what i want to do is i want to display the checked dot length instead of 10 and do you want to select all so instead of 25 what i want to do is i want to define the students dot meta meta dot total we go ahead and check that so students dot meta dot total okay so let's save that and when we click then we want to select all the records and okay this should work fine so we are only updating the total count if i go ahead and select that you have selected 10 items do you want to select all 41. so the only thing left to implement here is when i click on select all then i want to select all of these records that have been displayed so all the paginated values also so now the next step that we out that i want to do here is i want to define a new api so let's go ahead and define a new api saying students all which will go to student controller and let's define a new function all all students so basically what this api will do is it will return only the ids of the students so we'll be returning only the ids of all the students and then assign that those ids to the checked array so i hope you get the idea so in here what i'll be doing is i'll define a new function called all students and then here i'll just return student and i want to plug the id this should work fine so now if we go ahead in our students index.view so when i click on select all records then what i'll be doing is i'll be making an api request so where's that select all records we set the select all to true and instead of first making the select all the true let's make an api request excels dot get to slash api class student slash all and then we get a response so let's i dump the response dot data let's go ahead and test that browser so when i click on select all then okay you need to select all and as you can see we are getting all the ids of the students then students that are available in our database now what we want to do here is we want to assign these values to our checked array the response.data will be this dot checked equals response dot data and then i want to set the select all true so let's save that and see whether this works or not according to our assumptions this should work if i select this then the 10 records are selected and if i click on select all then we can see we are currently selecting all 41 items and we have the checked area of 41 and if i click on page 2 then the state is maintained all over our pages this is really really cool so now what we can do is so we have seen this we have already implemented the selecting all 2041 items so if i click on again click on it so the checked array gets empty so i want to show a small bug here so as you can see when i click on this then you are currently selecting all 10 items so here what i want to do is when i uncheck that so that is in the watch page of select page maybe so here what i want to do is i want to reassign the checked area to an empty array and then i want to set the select all to false save that and now i select this i select the 10 items and click on select all all these 41 items are selected and uncheck it and again if i check it then you have selected 10 items you want to select all so this is working fine and i want to show one more bug so if i'm selecting if i'm selecting three records and then when i go ahead and select the check box to select all the records then as you can see it should select actually 10 items but we are currently selecting 13 items so the ids that we selected earlier got repeated again so in order to prevent this what we can do is let's go ahead to our select page and if here what i want to do is i want to reassign the checked array to an empty array and this should work fine let's go ahead and reload our browser and when i select these three items and select this check box then you have selected 10 items you're going to select all so this is working fine and one more thing one last thing that i want to do in this video is so since i'm selecting 41 items here and while i'm selecting these items what if i go ahead and delete this item from our record so let's check out the bug so if i click on this then the item got deleted from our database but we have the checked array of 41. so what i want to do is i want to remove that id from our checked array so in order to do that let's go to our visual studio code while we are deleting the single record then what i want to do here is if the record gets deleted then what i want to do here is i want to assign the checked array to this chart checked dot filter so on a filter the all of the ids in our array and i want to only keep the items where the id is not equal to the student id so this should work so what we are doing basically doing here is we are filtering through all of the items from our checked array and only keeping the ids where the id is not equal to this student id so the final result that we'll be getting here is we'll be removing removing the student id that we deleted from our database now let's go ahead and save that reload our browser let's select these 10 items and click on delete so as you can see we have already maybe you have noticed this so you have selected 10 items earlier we have nine and the total also got reduced by one so this is working fine and maybe a few things that we need to implement this so this video is getting quite lengthier but i don't want to implement that on the other video i just want to implement it here so that is the confirmation message so when i click on this select delete this or when i click on this delete then i want to show a confirmation message that is are you sure you want to delete this and then when i click on ok then only i want to delete that record so for that let's go to our visual studio code so in our visual studio code when i click on delete single record here what i want to do is one click i want to confirm are you record and along with this i also want to specify another parameter that is event dot stop immediate propagation so this is a this is basically a javascript function so if i when uh when i click on this confirm button and when i click on ok then this function will be executed and it will stop the propagation execution of code after this line of code so anything after this so at the right click won't be executed and if i click on okay when i click on ok then this function will be executed and when i click on cancel then anything after this code won't be executed so even dot stop immediate propagation is gonna do that so let me just copy this part so from here to here and paste that in our delete button as well so here let's just specify that here so let's save that and now if i go ahead and click on this then i can see uh are you sure you're gonna delete this record when i click on cancel nothing's gonna happen and when i click on ok then that regards gets deleted from our database so this uh was quite lengthy video the you like the content and in the next part we'll be implementing the sort functionality 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 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 two hour 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.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 uh 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 darr i'll just copy this whole 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 this order so the next step here is to define some properties so we'll be defining two properties that is 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 our 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 class assembly selected section is empty this 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 want to 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 feed and then what i want to do is i want to get the students again so 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 students 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 students 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 and in that case i only want to change the order so toggle the order so if we can use actually a stoma 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 for now it is descending so if i click again nothing's happening here what's the problem sort direction is equal to descending or 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 and now the data is all sorted in descending order if i click again the data is sort in ascending order but 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 i 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 sort 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 the sort field doesn't have any values that belonging belongs to this array then we'll set this 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 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 one last check perfectly consider 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 so in our previous video we discussed about the sort functionality using vgs so in this video we'll be working on exporting the the data to an excel file so whenever i select these multiple records and click on export then these data should be exported to an excel file we'll be implementing that in this video so for that we'll be using a package called laravel excel so let's go ahead and install that laravel package i'll just open up the terminal and paste that and i'll be right back once this finishes installing so the package has been installed and the next step that we'll be doing here is let's go ahead and define a route so that will be route get students export and we'll be using an array of students we'll be passing an area of students to this route in order to export that those records to an excel file so we have multiple ways of doing this and i tried them and it's quite hectic to deal with larval excel on view yes since we need to uh we need to implement everything on the front-end side using vue.js so we either have to use a view.js package or something like that and convert that to a json object and then export that data to excel file but i found a workaround for that we'll be using so what we'll be doing is we'll be sending an array of we'll be sending an area of students data to the route and then we'll on the controller site we'll export those area of ids we will use the area of ids press the data from the database and then export that data to the excel file so whenever we make a request to the student's export with the id of student we want to go to student controller class and let's define a function called export we will be defining that function later so first let's go ahead to our documentation and check out the exports and we'll be using from query since we need to query the database so for that first let's go ahead and create a new export file so php artisan make export i'll be naming that students export hit enter so our export file has been created configuration file has been created in the exports folder inside app directory so here what we'll be doing is we'll be using exportable since we need to query the database so we need to use these trades and we'll also be using from query let me remove these and let's also import these and here we need the query function okay what we can do is let me just copy this public function query and we also need to use the constructor here which will be used to receive the area of students what we need to do here is we need to query the student model query and we'll be querying the database using key so where key is let me just define the constructor first function and we'll be receiving an area of students and we also need to define a protected student here which will be assigning in here in our constructor so this let's name that students so this students will be equal to the students array that we received from our constructor and then what we'll be doing here is where key is since we are using the variable defined here so we need to use this keyword for this students and the next step that we'll be doing is since we have defined the export configuration file for our students let's go ahead to our student controller and define a new function here so we need to name our function as export and we are receiving the students value students ids here so the way we get the ids from the student is in the is in the form of string and not actually in the form of array as you have already seen in the deleting multiple records part what we did was we actually got a string of student id so we need to convert that to an array so we use explore function so what we'll be doing in this case as well is we'll be using the explore function to convert that array to uh to convert that student's string to an address so students array and then the way we export those file export those data to an excel file is by using this command so whenever we go to the export function what we'll be doing is we'll be returning a new student's export and here we need to pass an array of students that will be students array and let's name the file as students.xls so this will be an excel file so our backend part has been done now let's go to the students index.view and in here what we want to do is whenever i click on the export button then i want to export that data to an excel file let's navigate to the export button and in here what i'll be doing here is i'll be defining a new property called url and this url is actually dynamic we'll be building this url whenever anything in the ui changes so whenever the user clicks on these multiple buttons then we need to generate the url where the students id are added to that url we need to make it dynamic so this value will be dynamic so for that we are defining it that in a property and let's go ahead and define that url in our data so this will be url so this url property will be empty by default and what we want to do is whenever the array of the whenever the value of the checked array changes then we want to update our url property as well so since we are selecting multiple records from our table and then we want to export these to our excel file then whenever the user clicks on these items then we also want to update the url value so for that what we need to do is we need a watch property defined for our checked array so for that let's go ahead to our watch object and here we want to watch for the checked array so whenever that changes then what i want to do here is we don't need the value here but what i want to do here is i want to reassign the url property so this url will be since we have defined the url in our api dot php so we want to go to slash absolute student slash export let's go ahead and here define slash api slash student slash export and then what i want to do is i want to pass an array i want to pass the checked array here so that will be this dot check so now if i save that and go ahead and reload the browser and now if i select two items then click on export and as you can see on the bottom left of the browser you can see the url been built up so we are exporting for the students id of 13 and 14 so these are two records and if i click on two more and then go ahead and hover on the export button as you can see we are exporting records for four students so this is working fine and whenever i click on the export button then it is gonna hit this api route so api students export with the value of this checked and this is not an array actually so we are converting that to an array in our api students controller dot php so it hits this api route we get these students ids in the form of string we convert that to an array and then we return a new student export we pass the student's array here and with the name of student.xlsx and on the students export what we are doing is we are receiving that value in the students on our constructor and assigning that to a variable called students which we defined on our export file and then we are running a query and exe and we are searching through the students model where the key matches these students that we receive from the parameter so let's go ahead and save everything and now the final thing is the testing phase so with this what we can do is we can select all and then we are exporting the data of 10 students so if i click on export then as you can see we had a pop-up to save that file and i want to save that on the downloads folder so now if i go ahead and open it up this should work fine and as you can see these records are exported successfully so this much for this series and if i feel like adding some extra features or if i find in adding a few if i find any features to be added here then i'll keep update uh then i'll keep updating this series in the future as well i hope you like the content and if you like it then do subscribe to the channel to stay updated and i'll be posting some more videos in the future stay tuned for that and i'll see you in the next one

Channel: Tapan Sharma

Views: 2,694

Keywords: vuejs, laravel, select all checkboxes with vue.js, filtering using vue.js and laravel, laravel vue.js tutorial, vue.js select all checkbox, filtering in laravel and vue.js, laravel vue.js, vue.js search, dependent dropdown using vue.js, vue.js pagination, laravel tutorial, vue.js tutorial, vue.js crud tutorial, tapan sharma, vue.js datatables, vue.js datatable full course, filtering with laravel and vue.js, bulk delete using vue.js, vue

Id: PuxibXGHeEo

Length: 133min 12sec (7992 seconds)

Published: Sun May 02 2021

Reddit Comments

[u/tapan288]

In this series, we will be working on:

• Implementing Paginations with Vue.js on the Frontend.
• Implement Multi-Column Search Feature.
• Filtering Records by Relationships like Classes and Sections.
• Implementing Dependent Dropdown using Vue.js.
• Sorting the Records by Multiple Columns.
• Making records Selectable and Performing actions like Deleting and Exporting to Excel.
• Implement the Excel Export Feature.

[u/mrkarma4ya]

Damn I just started working on implementing a datatable and you drop this video like an angel

[u/ShadowSpade]

Thanks