Implement Filter Functionality | Lets Build Some Datatables With Laravel and Vue.js

so in this video we'll be implementing the filter functions filtering by a 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 video 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 apis less 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 so again if you go ahead and reload and as you can see we have five arrays with their 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 v4 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 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 not wire model but we 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 now 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 1 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 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 by 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 will 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 student's 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 1 then i should see the sections 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 uh 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 so what we can do here is we'll be passing the selected section as well so did we do the v model part maybe 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 xcos 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 want to 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 apr says sections and with the value of class id is this selected class then we hit this api.php on the eps last 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's 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 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 okay 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. get apis 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 and let's check our console if i select class 4 then we are getting a 500 internal server error so fps last sections question mark class id equal to 4500 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 returned 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 one 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 iris two two items for sections so one is section a and the another one is it was 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 3. 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 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 two 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 will 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 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 we'll be discussing in the next one so stay tuned and i'll see you in the next one

Channel: Tapan Sharma

Views: 513

Keywords: vuejs, vuejs tutorial, vuejs 2 tutorial, laravel vue.js, filtering with laravel and vue.js, filtering data with vue.js, vue.js pagination, laravel vue.js tutorial, filtering using vue.js, laravel pagination, tapan sharma, search through relationships in laravel, laravel datatables, laravel, laravel vue.js datatables, laravel search, javascript, dependent dropdown using laravel and vue.js, dependent dropdown using vue.js, vue

Id: 9sfApctu8n0

Length: 23min 38sec (1418 seconds)

Published: Thu Apr 15 2021