Let's Build Some DataTables Using Laravel and Livewire | Complete Tutorial

hey guys this is tapan shama here and i'm back with a tutorial series and in this series we are going to be implementing some free awesome and feature-rich data tables using laravel and livewire so this is basically the combined version of all the different video tutorials that i've currently recently uploaded in my channel so what i did was i actually combined all of the different tutorials different sections or different modules of of of my videos and then i just compiled the them all into a single video so that you can all get all the so that you can get all the information in a single video and so let's talk about uh what we are going to be implementing in this uh in this session in this tutorial so the first feature that we'll be implementing is the pagination feature as you can see we are without any page reloads the data are we can actually implement the per page validation of how many data we want to show and yes this is the pagination feature that we are implementing so without any page reloads the data are paginated the second feature that we'll be implementing is live search features so we can search multiple columns so if i type in miss as you can see it is searching through the name and if i type in ber then you can see it is searching through the email and if i type in a35 then it is searching through the address and if i type in plus one then we should see all the phone numbers starting with the plus one and one another awesome feature is the these search results are also page needed so the records only with plus one are displayed here and also on the next page so as you can see the results that are displayed here are also paginated so this is the feature this is also one of the awesome features that we'll be implementing here and we are also searching through the relationships so each student belongs to a class and section so we'll be implementing the relationship searching as well in this tutorial series and another feature that we'll be implementing is filtering through class and section as well so multi-level filtering so you can apply this feature on any other use case that you like or if you want to implement it so if i select class 1 here then only the students belonging to class 1 are displayed here so filtering through filtering the data by class and also section so if i select class 1 then these sections that belong to class 1 are displayed here so section a and b so if i select section a then we don't have any section belonging to class we don't have any students that belong to section a and if i select section b then also we don't get any with the results okay maybe we don't we don't have that okay we are on the page two that's why it's for it was not working so if i so we also have the filtering feature here so filtering the students by class and section so multi-level featuring filtering so if i select class one and also select class section a then all the students belonging to class 1 and section a are only displayed here so we will be implementing this feature as well and this is the dependent drop so depending on the class the sections are also displayed so this is another feature that we'll be implementing and we'll be also implementing deleting single records so if i select if i click on delete and ok then we get a confirmation message and if i click on cancel nothing's going to happen and if i click on ok then we should see that record deleted and okay one one another thing that we'll be implementing and last and the awesome feature that we'll be implementing is selecting multiple records from our data table so we have these check boxes here so as soon as i start selecting these records then we'll see this check box here with the check of the with the count of the records that we are selecting and then we can export these data to uh export this data to our excel file or we can also delete this so if i select export and we also get a confirmation message and if i click on ok then we should see a file been downloaded here as you can see so this feature is working as well and also we are going to implement one more feature uh that is will be also we will also be talking about the performance so elementary eliminating the duplicates duplicate queries that are executed so we'll also be talking about eager loading other features that will help us to improve the performance of our app and we also have this checkbox here so if i select this checkbox then you can see that you have selected nine items and we are filtering here i think okay we don't have any filtration but okay let's reload our browser then you can see you are currently selecting 10 items do you want to select all 39 and if i click on select all then we select all of the 39 items and now what we can do is we can delete or export this data as well so these are the features that we'll be implementing in this series in this tutorial session so if you like the content do like the video and subscribe to the channel to stay updated about the future releases and i'll be posting more uh laravel related tutorials in the future as well so stay tuned for that and without any further details let's get started so in this video we'll be implementing two features one of them is the pagination so this will be real-time pagination using live wire and the another one is improving the performance of our application as you can see here we are executing 23 queries in in which 20 of them are duplicated so we don't want the duplicate we want we don't want to run the duplicate queries again and again which will probably decrease the performance of our application so in this video we'll be talking about a feature called eagle loading in laravel and also perform the pagination using livewear so let's get started so in this video we'll be talking about implementing pagination using live wire and also you know updating uh the pagination values by selecting it from the drop down so the amount of uh so the amount number of data that we want to show on a single page that is 10 20 or 30 and also changing this uh to make it real time using laravel livewire so let's get started so the first thing that we need to do is we need to create a livewire component so what i'm going to do is i'm going to create a component called students so php artisan livewire make students and hit enter so the component has been created live students.please and what i'm gonna do is i'm gonna copy the value from our students view file so which is displaying all the table values and all these markups i'm just i'm just gonna copy it from the from here select everything up to here cut that and include that component like what component here students save that and go to our live students blade file and paste that here and also make sure to include a parent diff component before defining the all the other markups otherwise live will give it will give you an error or it will not proper work properly so a parent div component is a must so save that and you also need to go to our main live livewire component which is located in our app http livewire and students and we also need to fetch the students here so students is student okay not all we are paginating here so paginate 10 and classes classes all save that and but and these values will all be automatically be available in our blade file and we also need to go to our controllers student controller and let's just comment these two values and also remove this part and now everything should work as usual so reload our page and everything is working fine and the only thing that we have changed is we have now separated our data table into a separate component into a separate livewire component and now we can perform everything related to live wire in our data table so our first step is to perform the pagination but right now it is whenever we go to page two our page is reloading so we don't wanna make that happen we want to change the table in real time using livewear so for that what we need to do is we need to go to our students live our component and use with pagination and by defining only this uh trait that is used with pagination our paginations now will work in real time so now let's go and reload our page and okay there's a problem here let me just undo that and go and reload it's working fine but if i use it with pagination then it's giving give me an error okay i think i have and reload the page okay let me go to my app service provider and comment this part and now reload the page okay still not working okay let's leave it like that okay now if i click on next as you can see our page is not reloading and the pages and the data is updating in real time so that is the power of live wire as you can see so this is live wire in action okay now our next step is to change this value depending uh is to fetch the number of data depending on this drop down so if we select 20 we should fetch 20 data at a time so how do you do that so for that we need to go to our [Music] students.blade.php livewire component and what we can do is we can call the wire model property here and model it with a property called paginate so we haven't defined this property yet so let me save the page and go to our students component and define a property called page in it and set a value of 10 by default and in order to implement this value what we need to do is we need to go to our paginate function and call this fascinate okay this will do the work that we want to do so since we are wire modeling it here so wire model the paginate value and also we are calling that function here okay let me just show one more thing what i'm gonna do here is i'm gonna first display this paginate value here and i'll just undo this value and then go and reload our page so now we have a value of 10 and the value is displayed here and if i change that to 20 the value is changed to 20 and if i change it to 30 the value changes to 30. so this paginate property value is changing in real time using live wire as you can see in this so this is the paginate value that is changing using the wire model property so now i'm gonna assign that property to our passionate value so this imaginate and now if we go and reload our page and let me also remove this 10 value here students comment that and reload our page so now we are only fetching 10 values and if i change that to 20 okay showing of 40 results we have some problem here value equal to 20 while model paginate what kind of problem is this okay we are at page three now okay now it is working fine so if i change that to 20 now we are fetching 20 values and as you can see here showing 1 to 20 or 40 results and if i change that to 30 now we are displaying 30 values so showing one of 30 or 40 results so our pagination is working fine so our next task in this section in this session is to improve the performance of our application as you can see here what i've done is i have i have opened up my debug bar and let me just reload this page we are displaying the we are only displaying 10 records by default and if we take a look at our debug of debug bar what we can see is we can we are actually running 23 queries and we are using 24 model instances and let's also check out the execution time so we are in order to execute 23 queries we it takes around 20 milliseconds and also the 20 of the of the queries that are executed are duplicated so we don't want this we want the queries to be as unique as possible and decrease the amount of duplicate queries so in this video what i'm gonna do is i'm gonna introduce a concept called eagle loading using la uh eagle loading in laravel so with eager loading what we can do is we can while we are fetching a certain model we can we what we can do is we can actually fetch all the relationship that the model has so like if a book belongs to a certain author so if the book and the so the book belongs to a certain author that what we can do with ego loading is that while we are loading that book we can also load the author of that specific book so this is called ego loading so while we are fetching that book we are also fetching that certain author of that book so what i'm going to do is i'm going to go to my visual studio code students.students.php so this is our livewire component so we are fetching all the students and what i've done is i have also defined the relationship for our class and section so student belongs to a certain class and a certain section so what i'm gonna do is i'm gonna go to my student model and i'm gonna eager load the sections and the class for this this student model so in order to fetch multiple multiple relationship what we can do is we can do that using the array we can pass an array and pass multiple relationship values so we want to fetch the class and the section of a certain student so we are displaying all we are fetching all the students along with their class and sections so now let me just go and reload the page here so notice the change in the queries tab and the query's execution time so it is 20.28 milliseconds and the number of queries are that are executed are 23 and 20 of them are duplicated so i'll just reload the page and as you can see the queries are have decreased from 23 to 5 and the query execution time has also drastically increased decreased from 20 milliseconds to around seven milliseconds so this is the power of ego loading in live in laravel so using eager loading what we can do is we can fetch we can prefetch all the relationship that the model belongs to or has and then we can solve the problem of n plus one query problem it is also mentioned here so we can eliminate the problem n plus one query problem so this uh so this theory so this concept is not necessary necessarily needed if you have a small application using which has around thousands of records but if you have a large amount of data and you and you and you need to fetch a large amount of data so for that case we need to we should care about the performance and in that case your loading is a must and so this problem makes uh improves the performance of our application and also makes a less number of queries to the server so i hope you like this video so in this video we talked about the we talked about pagination using laravel livewire and also talked about how we can drastically improve the performance of our application using the concept of eagle loading so this much for this video and in this in the next video we'll be talking about implementing bulk delete functionality using live wire so stay tuned for that and i'll see in the next one so in our previous video we implemented the pagination feature using livewire and you know in this video we are going to be this we are going to be implementing the bulk delete feature using livewire and whenever i select these items or records from our data table then we are going to show a check box and also show the count of the account of the records that we are that we have selected and also and then when the user clicks on delete then you want to show them a confirmation dialog whether they want to delete the record or not and then if the user clicks on ok then we will delete those records and also show a confirmation record confirmation message that the record was deleted and we will also be implementing deleting single records using this delete button here so without any further delays let's get started so we have a check box here and we need to wire model this with us with a property so let's go to our visual studio code and we have input type object checkbox here and we also need to set a value to it so we'll have a value of the current loop value that is the student id so it will have the value of student id and let's also wire model it with a property that we haven't defined yet so we want to wire model it with a value with a property called checked and let's save that and now let's go to our students livewire component and don't worry about all these codes because what i did was i accepted accidentally deleted the tutorial that i already recorded and that's why i'm re-recording it again so we'll be implementing these in the future so don't worry about that and now what i'm gonna do is i'll be defining a property called checked here so this is gonna be a type of array which is gonna store all the ids that we uh that we'll be selecting from our check boxes and now we have since we have wire modeled it with the checked property and if i go and do display this in our view so i'll just do a for each loop here for each checked as item i want to display that item to make sure that it is working fine it is working properly so let's go and reload our browser and now if i select this value then we should see the id of this record and as you can see we have the id of one probably two three four and five and so on so now we have all the ids of these selected records in uh array and what we can do now is we can delete those records using livewire and laravel so let's go to so since we are on our view file okay let me just remove this for each loop and now whenever the user clicks on delete okay so whenever the user selects these records then what we want to do is we want to show this button here so we checked and also show the count of the records that we have selected so let's go to our view file and we have that button [Music] right here okay let's cut that and wrap that in if condition so if the value of checked is set then i want to show this button let's also confirm whether this is working or not let's go and reload our browser and now our button is not visible so if i check any one value then the button appears here so the if condition is also working fine and we want to show the count of these selected records in here so what i'm going to do is i'm just going to remove this two value here and then i want to show the count of the checked array here okay let's save that and also reload our browser again and now if i select one record i should see one if i select two then i should see two three four and so on so it's working fine now whenever i click on the delete then i wanna show a confirmation dialog that whether the user wants to delete these records or not and then when when the user clicks on ok then i want to delete those records from our database so how do we implement that well it's quite easy what i want to do here is whenever the user clicks on submit okay let's implement the on click method here so on click i want to show a confirm dialog which says r okay i think i should wrap that in a single quote are you sure you want to delete these records and let's also pass an or condition and i will be executing a javascript function here which is event dot stop immediate propagation so basically what it's gonna do is whenever the user clicks on so when the user sees this confirm button and when the user clicks on cancel then what it's going to do is after the user clicks on cancel then whatever we write after this code that is if we have a function called wire submit and we want to delete the records then what it's going to do is after the user clicks on cancel then of the all the code after this won't be executed so this event or stop immediate propagation is going to implement that feature and when the user clicks on ok so the when the there is a true condition true value received from this confirm value then this function will be executed and when there is a false value received from this function then this function won't be executed okay i hope you understand the concept i'll save that and let's go and define this delete records function in our livewire component so here i'm going to define a function delete records and we don't need any pair of parameters here so what i'm going to do here is i'm going to query i'm going to store all the students value in a variable called students and i want to query in the student table so we have the student database and we can use the query builder called where key so if you pass in so where key generally takes not generally but where key takes an uh an array of ids so if you have an id of 1 2 and three so if i want to delete these records from the database then what what it's going to do is okay let's also include the get condition here so get builder and what i want to do is i'm i want to die dump the students here okay so this is gonna get all the students where the id is one two and three so we are passing an array here in our where key builder let's save that and reload our browser and now if i select okay we don't need to select it but in order to see that button we need to select any one record and if i click on delete then we'll see a confirmation dialog if i click on cancel nothing is going to happen and if i click on delete and ok then we should see an item value where the data where the records have the id of one two and three and it's taking a bit of time okay i think i implemented wire submit here but it should be wire click okay let's go and reload our browser again and we should see that button delete and okay and now we see array of three items where the ids are one two and three okay it's working fine as expected and what i want to do here what we are going to do here is we are going to send we are going to pass that checked array here so we have an array of checked property so we want to pass that here and we don't need the get property here and what we can actually do is i think we don't also need this student's variable here so student var key this checked and then we wanna delete these records so this will work fine and our next step is we wanna [Music] reassign our checked array to an empty array and then we also want to show a session to our user a confirmation a dialog to the user within type of info where the message would be let's save that and now if we go and reload our browser once again and i want to delete these three records we checked i want to delete i usually want to delete these records click on ok and we should see these records deleted and we should also not see this button here and we should see a confirmation dialog here click on ok and as expected everything worked fine so our data was deleted and our next feature i want to implement is deleting the single record here so this is also quite easy so we'll be implementing the same feature that like we implemented here so the we checked not the we checked but when the user clicks on delete and showing the confirmation dialogue so i want to show a confirmation dialog whenever the user clicks on delete button here too so let's go and define that so in order to do that let's go to our students.update.php and we have that table here and we have the button whenever the user clicks on this button i wanted what i want to do is i want to show the confirm dialog again with the message are you sure record and let's also by the pass that or condition with the event dot stop immediate propagation and now let's wire click with a function delete single record so we haven't defined this function yet and i also want to pass that id that record id here which is the student okay so delete single record let's go and define that function here students php component and we'll be receiving the student id here student underscore id and to check whether it's working or not that's also dump and then we'll be deleting that record later okay let's reload our browser again and now if i click on delete and click on cancel nothing's gonna happen if i click on delete again and click on ok you should see that item id of that record so now the only thing what you that you want to do is we want to find that record so let's store it in a variable the student where i want to find with the student id and then delete that record i'm making a lot of typing mistakes so that student is deleted and now that's also a session plus message here that the record was deleted successfully so this should work fine again let's go and reload our browser and if i click on delete and click on ok then we should see a confirmation message and this record should also be deleted so click on ok and as expected it's working fine so one last feature that i want to implement here is whenever i select these records i want to show a primary color on these tables on on these table rows that are selected so different colors for only the selected tables so how do we implement that well that feature is also kind of easy kind of easy here so let's go and go to our students.php function students.php component and define a function called is checked so this is gonna only gonna return a condition a true or false value whether the record is checked or not so we are gonna send a id student id here too [Music] and only we are going to check here is whether the student id is in the checked array or not so if that id is in our checked array then we will be returning true from here and if it doesn't exist then it will return false so the way the way we can check that whether a certain value exists in an array is by calling the function in array so in here we can pass the student id and we want to check whether it exists in the checked array or not let's save that okay this should work fine and now let's go to our students.blade.php component and i want to display a class of table primary so if i apply a class of table primary here notice the change in the color so let's reload our table reload our browser and i want i want to display this color only on the selected selected rows so let's apply a if condition here this is checked so we want to call the function is checked here and then pass the student id so if this condition is true so if the student id exists in our checked array then i want to apply that table primary i can just paste that so now what it's going to do is if the checked array consists of our student id so this student id if it exists in our checked array and if this condition is true then i want to apply the table primary class here so let's go to our browser reload it and now if i select a certain record then this this records color changes to primary and it's kind of a cool feature to implement i like it and if i go and delete these then these records get deleted and we got a confirmation message and everything is working fine so in our previous video we implemented some features like the pagination and the bulk delete and also deleting these single records and in this video we are going to be implementing the search functionality into our in in our data tables so using this uh search using this search input field we can search through the multiple columns of the model like the student name email address or phone number and we'll also talk about how we can implement how we can search through the relationships of a certain model so the so first we'll be working on searching through the models columns different column fields like the name email address or phone number so in order to implement that let's go to our code visual studio code first and so here i have the model that is the input field so what i'm going to do here is i'm going to wire model this to a property called let's call it search so this will be the search term and i need to go to the students live wire component and i'm going to define a property here called search and let's set that to empty by default and now let's display that search term here and if i go and reload our browser okay i need to reload the browser and if i go and type something here then you can see the search term being displayed here so our model so our wire model is working fine and now let's implement the source functionality so in order to implement this search functionality what i'm going to do is i'm going to define a [Music] feature in laravel called scopes so if you go and check out the documentation of laravel there are different kinds of scope so we'll be using the local scopes here so local scopes are generally a kind of a function which are defined on the model so in our case we have a student model so so we will be defining a scope in our student model to search through the multiple columns so the way we define a scope is by appending a scope term into our function so if i'm defining a function if if you want to define a scope for a for the popular users popular words where the votes is greater than 100 then will be we'll be naming that scope as scope and then popular so scope followed by the function name and it will receive the query that we are building through so it will receive the query builder and then we can perform the search operation from here so now let's go to our student model and define a scope here so we need to define it as a function and the name that we are going to give it is will be a search so scope search and then it will receive the query builder as the parameter and also we are going to send the tom the search sound that we want to search through so these are the two parameters that we'll be receiving and let's wrap that inside a function so query where function so we'll be passing we'll be defining a function here so all the var from all the functions all the var queries that we'll be defining inside this function will be run at once okay i'll just implement it and explain it later so it is going to receive the query here and we also need to use the term the search term that we are searching through the multiple columns and let's also go and check out the documentation so utilizing a local scope so now we are gonna [Music] query through our models so we wanna query where okay let's first define the term we wanna name let's just redefine the term the term will be we want to append the percentage sign so we'll be searching like the term just like we do in the normal search so let's wrap that so we are going to wrap that down with the percentage sign so that it will search it will find the similar terms which resembles to this term in our database so we are going to pass so we want to search through multiple columns so in this case we want to search through the name which is like the term or where so we in order to search through multiple columns will be appending or where so or where the email is like this term and we also want to search the phone number which is like this term and we also want to search the address which is like this term so this is this query is going to be returned from this function which will be executed whenever we call this function and we are going to call this function whenever we are fetching all the data data all the data all the tables from our database so now in order to implement this scope so scope search what we are going to do is we are going to go to our live students live bar component and whenever we are fetching all the students then we are going to call that search function so remember so notice how we are only calling this search function with the small s and not the whole function here so we need to eliminate this co part and only define only call this search part okay let's save that and here we are gonna pass this search down so the term that we have modeled it with and what i'm going to do here is i'm going to pass it inside a function so the trim function basically what it's going to do is it is going to remove all the white spaces from our term from our search term so this search and now our search function search functionality is going to properly work so let's go and check our data table and reload and now whatever i type in here so if i type in plus one then it's gonna return all the phone numbers where the value consists of plus one so plus one plus one plus one plus one so our search functionality is working fine here and if i type one six two nine which is which one consists which is inside an address field so that should also work fine one six two nine so we have only only one value is returned so it is also searching through the address field address column and if i search for no con so which is in on an email to check whether it is working or not and only one value is returned so no con either it example.com so this function is also working fine that is it is also searching for the email and lastly if i search for professor so all the values consisting of this term professor are returned so it is working fine here and one more feature about liver i want to talk about is the debouncing the input so what i what i want to do here is after every 500 milliseconds duration so by default it is set to 150 milliseconds so after every 150 milliseconds what livewire is going to do is it is going to make a request to our server at an interval of 150 milliseconds so we can change that to either one second or two second or 500 milliseconds and we also can apply the lazy updating but in this example i want to change that to 500 milliseconds so after every 500 milliseconds livewire is going to send a request to our server so which will drastically uh decrease the request that our client is going to send to the server so wire model dot d bounce dot 500 milliseconds so let's save that and go and check our database or check our table and if i type in plus one and after 500 milliseconds it is going to send the request and again if i type in space and then a comma and then a bracket 702 so this is gonna drastically reduce the amount of request that our client sends to the server okay so up till now we have achieved searching through multiple columns of a certain model like searching the name email address or phone number so but what if you want to search through their relationships like searching the class and sections of a section which are relationship which belongs to a certain class disorder so student model belongs to certain clients in sections we uh how do we search through the relationships using live wire so the concept is that is used here will be using laravel but we'll be making it real time using livewire so let's discuss how we can achieve that so let's go to our student model and first what i'm going to do is i'm going to show you the documentation of how we can search through the relation so we have uh the section here querying relations so we can do that using the where has where it was okay querying relationship existence so this is checking whether it has or not and we are gonna use the var has query builder here so where has where has takes two parameters first is the name of the relationship like if a certain post has comments then it's gonna we are gonna pause the relationship name here and the second argument is gonna be the function which is gonna pause the query and also the term and then we'll be searching through the comments model comment model where the name where the content is like code so this is the example that is shown here so let's go and implement that in our model in our student model so we are going to query the or where has query builder here because we we also want to search through the names email address along with the relationship name here so r where has and the name of our relationship is class as you can see here class and the second parameter is gonna be the function and we need to pass the query builder here so query and we also want to use the term the search term so we need to also pass that u stone and let's also define the curly braces and now we are gonna search through our class model so query where so we have in our class model we have a field called name so we wanna search the names of class the name is like our search term so this is going to be returned and we also want to search through the sections so we can append that here again or where has and the name of our relationship is section and we need to pass the function along with the query and we also need to use the term in order to search through the relation let's grab that in a curly brace and then we want to search the names of the section so we have defined it as name where the name is like our search term let's save that and let's go and reload our data table our browser so now if i search for class 2 only the classes within this name class 2 should be returned and yes it is working fine if i search for class 3 then only the search term with the value of class 3 where the class is class 3 are returned as you can see and if i search for class 1 which i don't have any so we should see it empty okay it's working fine let's also check it for section [Music] so we have section b so only the term containing the section b will be returned here so it is working till now section c okay we don't have any section c here if if we search for section a so we do have the section a okay so in this video we discuss about how we can search through a single models multiple columns like the student name email address phone number and we can append as uh we can append multiple columns using this method so we can append or where columns or where query builder into our term into our model so if we have multiple columns then we can append those using this hardware and we also talk talked about how we can query the relationships of a certain model like the class in section using the or where has query builders so it takes two parameters the first is the relationship name and the second is the function that we need to pass through it and then we'll be querying and then we'll be querying their data data table our database so we can also implement multiple searching here if you want if you only want to implement name or we can also query through their another column you appending the or where method here like we did here so in this way we can achieve all the types of functionality using the query builders and let me also repeat the feature that we have implemented here the scope scope section here so we are defining a scope with the name of search and we are defined redefining the term appending it with percentage sign so it is gonna source the term relating to this term so percentage is gonna match it up with the characters and then we are wrapping our query inside a function and searching all of these at once so what it's going to do is it is going to chunk all these results and then pass it from here so it is going to return all of these at once it is going to execute all of these queries at once because we are wrapping it inside a function so i hope you understand so in this we also talked about the scope local scope defining the scopes and then searching through multiple columns so i hope you understand the features that we have implemented in this video and if you have any questions or confusions then you can post a comment in the video and i'll try to answer it if i can so in our previous video we discussed about how we can search through multiple columns and also searching the relationships of the model and in this video we are going to be implementing the filter functionalities so whenever i click on class 1 then only the class containing the value of class 1 should be displayed here and if i select on class 2 then only the classes where the value is class 2 should be selected so this way we'll be implementing this search functionality using laravel livewire so in order to do that let's go to our visual studio code and go to our component and what i've done is i have query i'm quitting all the classes from our database so for each classes as item what i'm doing here is i'm just displaying all these values so what i'm going to do is i'm going to wire model this select tag here with a property called selected class which i haven't defined yet so selected class and this will be this value will be assigned as the id of the certain class so we have a value of item id so whenever i select class 1 then this selected class value is going to be set to 1 if and if i set it to 2 then this class property is going to be set to 2. so in that in that way the wire model property works so let's me let me just save that and go to our students.php livewire component and define a property called selected class so public function selected class and let's keep it null okay not function public selected class is going to be null by default so we have defined this property and if i go to our students.blade.php and let me just display that selected class property here save that and go to our browser and reload and if i select class 1 then we should see the value of 1 because the class 1 is has the id of 1 and if i select class 2 then it should be 2 and if i select class 3 that should be class three so our wire model property is working fine let me just remove that so what i'm going to do now is i'm going to use the query builder of laravel laravel so if i go and search for when so we have a query we have a feature called conditional clauses in live wire okay not live laravel so whenever a certain value is true so if a certain value called the role is true then we want to call then we want to execute this function so this we are going to use this property to search through the classes so whenever our selected class property is set then we want to search through and then we want to perform the query where the query queries class id is equal to our selected class id and in that way we'll be etching achieving our functionality so let's go to our students.psp file and okay not students or ph php but our student.php model and what i'm gonna do here is i'm gonna run the function here okay not here now student.php model what i'm gonna do here is i'm gonna append that when query here so when our this selected class is property is set then i want to run a query and we also need to pass the query builder here okay we need to remove that so we want to search through the query where the class id is our selected class id let's save that and okay we need to keep that here and everything should work fine now so what uh what we are basically doing is we are uh executing conditional clauses here so if this value is true so if this value is set then we are going to execute this query so if we have a value of suppose we have a value of id of 1 then we are querying the querying of database where the class id is 1. so it's going to return all the values where the class id so it's going to return all the students where the class id is one and if it is set to then it is going to return all the students where the class id is to let's save that and go to our browser and reload so now we don't have anything set so it is uh it is actually displaying everything and if i go and click on class 1 then it should be nothing should be displayed because we don't have it have any uh student which belong to class 1 so we see that so it is working as expected and if i click on class 2 then you should only see the students where the which belong to class 2 if i click on class 3 it should work as expected and class 4 should also work is expected so what if you wanna move go further uh what if you wanna go a step further and also implement that uh filter functionality along uh with the sections as well so if i click on class one then i should see also see the sections of this class one and then we perform filtering from the sections as well so how do we do that okay let's take this feature uh further a step further and let's also implement the functionality of filtering the students by sections so by so up till now we are filtering the students by classes so we want to implement a feature where if i select class 1 then i want to see the sections that belong to class 1 and then whenever i select section a then i want to then i only wanna see the student that belongs to class one and section a so let's define that feature so let's implement that functionality so in order to do that let's go to the code editor and here what i'm going to do is i'm going to define a function again not function a property that will be selected okay let's define a property called sections and let's keep make it null by default and whenever this property changes so i want to fetch all the sections which belong to a certain class so if the selected class value is one then i want to fetch all the sections which belong to class one okay so in order to do that we need to use a property called lice life cycle hook in live wire so whenever a certain property changes then we want to call that function and that function is called the updated lifecycle hook so we need to append a updated function and along with the property name in this case we want to check for we want to monitor the selected class properties so whenever this class changes this value changes then we want to call that function and then fetch all the sections that belong to this selected class so the way we define that property it will be in this way so if we have a property called selected class so if you have a property called selected class then we will append that property name here and whatever the property will be whatever the property change value changes to that will be receiving as a parameter in this function so if the class id changes to 2 then we'll be will be receiving that value in our function as a property so now what we want to do is we want to set the sections value to section where the class id is equal to this class id and then we want to get the values of this class id okay and we are setting that to this sections so now we have access to all the sections all these sections as a property and then we and now we can loop through each of these in our blade file so now uh so i have uh i have defined a tag for selecting the sections so what i'm gonna do here is if the property of sections if the property of the selected class is set that is this class so whenever this class has certain value like 1 2 or 3 then i want to display this part there is this drop down i want to display this drop down so we need to grab that in an if condition so if the selected class is not equal to zero or okay it's not r it should be and i think okay let's keep it as end and we'll check whether it works or not and if the selected class is not null then we want to show the drop down okay and let's give an option of select a section and we're going to loop through each of the sections here so for each section says item i want to display the option and the option value will be the id and we want to display the name of the section so in this case items name and i hope everything is fine here so let's go to our browser and reload and now if i select class one then i should see section a and b so we have a drop down here so select a section section a or b and if i click on class 2 then i should see section a and b as well so if we go and check our database we have section a and b for class 1 and section a and b for class 2 and we don't have any section for class 3 so if i select class 3 then that should be empty so it is working fine and okay we have implemented that dependent drop down now what we want to do is whenever a user selects section a then i want to filter that then i want to filter those students that belong to section a so we can implement that using the same functionality that we have implemented here so let's go to our students.blade.php component and let's fire model it so i want a wire model selected section so we haven't defined this property i'll just copy that and go to our students livewire component and define a property called selected section and let's keep it keep it null by default and now what we can do is when this selected section is set so the way we implemented our implemented in our selected class we can copy that and when this selected section value is set then we want to run a function then we want to run the query the query where the section id is so remember we need to key we need to have the section id and the class id in the students model so we are running the query in our student model so we have the class id and the section id in our student model so we need to have this relation and the query where the section id is equal to this selected section so save that and we have wire modeled it and we have also defined the property let's go and check our student.blade.php so we have modeled it with selected section so everything should work fine now let's go and reload our browser and if i click on class 1 we don't have any students if i select class 2 then i should see all the students that belong to class 2 and also only the student the students belong to only section b so we don't have any student that belong to section a so if i select section a then there is results should be empty here and yes it is working as expected and if i click on section b then we should see the values but we don't get anything here class 2 section b okay let's see what's going on here wire model selected section studies.php when this selected section is set function query query where the section id is this selected section class three section a okay there's a problem in my database i think all right so there was some problem with my database seeding so i haven't i haven't changed any code here so i what i did was i just called the i just receded my database and our all the code is exactly same i haven't changed anything here and i just receded my database and if i go and reload a browser and select a class that is class one then all the only the students belonging to class one are displayed here and the pagination is also working fine so if i remove this and so we have more than 10 records for a class one so if i go to next then the cloud only the class 1 students are displayed here so the pagination is working and now if i select section a then we should also only see the students that belongs to class 1 and section as you can see here and if i select section b then we should only see the students that belongs to class 1 and section b and all the other functionalities like searching through the these filter results so if i search for k-o-r-e-y then only the only the results belonging after only the results after the this filtered are returned back so we have suppose 10 records here so suppose we have filtered our data using class 1 and section b and now if i and we have 10 results here so now if i run the query then it is gonna search only in these 10 queries as you can see in our database here so when we whenever we are calling this when condition and then only we are searching the term here so we we can we can define you can define how you want to search the model so i am searching at the end so we will be filtering these data and then searching this so that's how it's working here so if i type something here then it is only gonna search through these results and not from the whole database so i hope you understand the concept so in this session we are going to be implementing how we can uh perform in exports using laravel and livewire so suppose i have multiple records here and when i select these records then what i want to do is i want to whenever i select all these records and which check what i want to do is i want to export these records to an excel file or any other file that you want to and in this tutorial i'm going to be exporting the records to an excel file so what i want to implement is whenever i select these records and click on bit check then i want to show a button of export and when i click on the button then i want to show a confirmation dialog that whether the user wants to export these or not and when the clicks when he or she clicks on ok then i want to export these records to an excel file so the first step is we need to install a package that is called laravel excel so you can go to this link so docs.laravel.com and from there you can check out the documentation to so this is the documentation to install this package just type in the type in composer requirement website excel and this will install the latest version of the package and now let's check how we can implement the export using laravel live laravel and livewire on the data tables that we have implemented here so let's go to our visual studio code and i want to display uh export button here so let's start with that okay so what i want to do here is i want to display an export button so i'm just going to copy this a tag here and paste that here so the href it doesn't really matter input type of button and on click i want to show a confirm message whether he or she wants to export these records or not and when the user clicks on cancel nothing's going to happen and when they click on ok then we want to execute the function called export selected and we don't need to pass anything here since we have the wire model property so we have access to all the property in our component itself so we don't need to pass anything from here so let's just save that and let's also change the value to export and so we have the export button we click on ok we get this confirmation dialog and when the clicks user clicks on ok then i want to export it so how do you do that the first steps let's go to let's go to the documentation and check out the exports and five minute quick start so here we have the documentation to create the export file so what i'm gonna do is i'm just gonna copy this command and go and paste that in our terminal so in our case the model that we want to export is student model and i'm gonna name our file as students export okay so php artisan make export students export and model is student hit enter and this is going to create a folder in our app directory and inside we are going to see the file called student export so here we have the general uh code for export exporting the students model so student all and by default it is using the namespace app stream student so it is giving an error so let's go to the documentation and check out how we can implement the export functionality so what we are going to do is we are going to use the function conform query because what it is going uh it is gonna have it it will help us to build a query so we'll be using query builder to [Music] export our records to an excel file so in order to implement the query builder what we need to do is we need to specify these trades in our student export.php file i'll just paste that here and we don't need the from from collection and also let's remove the app slash student we'll be implementing that later and we don't need the form collection here and we need to implement the from query so i'll just copy this and paste that here and we also need to use the export table so this is the trait so we we also need to use this exportable trade and i'll show uh show you the usage of this in in just a moment of time so we have the collection and we also don't need this collection function here we are going to use the query function here i'll just copy this and paste that here and instead of student what we wanna instead of uh invoice what we wanna do is we wanna get the student model here and this is imported as expected so let's just save that and what we want to do here so instead of just returning the invoice query what we want to do is i'll just show you the example of what it is actually doing here so what it is actually doing here is it is uh receiving the value of a year as a constructor and then assigning it to the local variable here and then it is building the query here so returning invoice query varia is create barrier with the value of created ad is this here so in our case what we want to do is we want to okay first define a variable here so protect it and let's name it so this is going to be an student's array so protected students and here what we want to do is students query where key so the var key is the function that we use in our delete records as well so we are query building the using the query builder and then passing the where key parameter where key builder and also we have passed the array here and then performing the delete operation so this where key builder takes uh takes an array of ids so similarly we are going to implement that here too so where key we need to pass the students array here okay and let's save that so we don't need anything else here and we also need to define the constructor let's just define that public function construct and we'll be receiving the students id and let's assign that to our students variable that we have defined here so this is this student's variable is this one so we are assigning the students array to our local students variable that we have defined here so this variable this student's variable is going to be set to whatever value that we pass from here okay and then this student's uh array we are passing it in our query builder okay and now one last step that we need to do is we just need to call this function as you can see here now we can download the export in order to download the export what we need to do is we just need to execute we just need to run this code so whenever the user clicks on export and then the user clicks on ok then we want to execute a function which we haven't defined yet probably so export selected so we need to execute this function and i'm going to define that here and what we want to do here is we want to return a new student's export and we also need to pass the array here so array of students ids so let's pause the this checked array and then download and let's name it students okay and don't worry about this error this is just a intellifence error here nothing else our syntax is perfectly fine and now everything should work fine okay let's check out the workflow of what's actually happening here so whenever the user clicks on ok this okay then we are going to execute this function export selected as you can see here wire click export selected this function is going to be executed we are going gonna go to we are gonna come here to our student.php component export selector is gonna be executed and it is gonna return a new student export and we are gonna pass this this checked array so we have it wire modeled so this check is going to hold all the areas that we are selecting in our data in our data table and so we are going to pass it pass the array to the students export and then it is going to perform the download operation with the name of student.xlsx excel file okay so now when we go to the students export then we are we are going to receive that value here so this construct function we are going to receive that value in our students variable and then we are assigning that value to our students array that we have defined here so this is the local variable and this is the value that we are receiving from our parameter okay so this student's variable we are assigning it to our local variable students so this is going to be an array now and then when we are running the query then what we are doing is we are running the query builder student query where key is this student's array okay so now everything should work fine i'll just go and reload our browser and what if i wanna export this value of these four students okay so i haven't defined anything else here the formatting of the excel file defining the heading or all the other things like defining the relations and all nothing i haven't defined anything uh we'll only see the raw excel file here but our excel should be exported so it should work fine so let's see what's going to happen if i click on we checked and click on export click on ok then we should see a file been downloaded here if everything is working fine then let's click on ok and now our file gets downloaded and let's open and check whether it's working fine so we have miss mariana simonis and all this we should see generally see the four records so i'll just open it so as you can see our excel file consists of four records with the value of 19 20 21 and 22 and also the class in section ids the address phone number email address everything else is working fine so i hope you understand how we are implementing this feature with the help of laravel and livewire and if you don't understand anything you can probably make a comment and i'll try to explain it to you all right we are back again and a viewer of my video requested a feature to implement a check box to select all the records of the data table and i am here with that feature and what i want to implement here in this session is that i i want to show a check box here and when the user clicks on it then we'll be selecting all of the records that are displayed on this page and then show a message that you are currently selecting this number of items and do you want to select all and when the user clicks on select all then we want to select all of the records the total records from audit from our data table okay so we'll be implementing that in this session and if you are ready then let's get started so now let's go to our visual studio code and we have a check box here in our so this is the input type of checkbox and let's wire model this with a property which is which will we will be calling as the like page which we haven't defined yet so let's go ahead and copy that and go to our students.php and define a property called select page which will be false by default and we'll be using the lifecycle property lifecycle hook of this select page so whenever this value updates then what we want to do is let's first item it so public updated select page and then we'll be receiving the value that is that will be either true or false and let's go ahead and die dump it i dumped that value and now if you go ahead and reload our browser and i if i go ahead and select this box then we should see uh the item value of true and that didn't work why that didn't work select page okay i didn't save this i need to save that now reload our browser and we should see that okay so we get a value of true and when unselected we get a value of false so now let's go to our students.php and since we have the select page then what i want to do here is if the value is true then i want to execute a query and if the value is false then i want to assign the checked array to an empty array that is we don't want we want to empty all of the records that are checked and if the value is true then what i want to do here is i want to select all of the records that are displayed on this page okay so these all of these 10 records should be selected when i click on this button so how do we do that so for that what we need to do is we need to we need to define a computer property so the way we define a computer property is by calling a function okay it's by defining a function so what i'm going to do here is i'm going to extract this all queries so student query that we are the query that which we are using to get all the students and along with the page paginate i'm just gonna cut this part and then define a computed property for this query so public function get students property okay and it needs to return this query so save that and so this is the computer property and we'll be calling this by the student's name here so get and the property are the convention naming convention for the computer property and what we can now do is we can directly call this students and everything should work as usual since we are using the computer property okay everything is working fine and the pagination and the filtration on filtering property and all everything is working fine and now what we can do is if the value is checked then what i want to do is i want to assign the checked array to this two dense and i want to pluck the id from that collection so this is going to give an error since we are since this is this will return a collection so this student is a query builder and then we are blocking the id so this is going to return a collection laravel collection but we are assigning it to an to an array and we are also using this array in our is checked method here so we are checking whether in our array we have this id and then passing the array here so this is the type of array and we are assigning it to a collection here so this will give an error so let's go ahead and check that error what kind of error do we get here and then we'll be fixing it later so if i click on select all then i get an error that in area expects parameter to be an array and given is object so what it basically did was it went to it executed this function so it is checked function is executed and it checks whether in array we have student id and this has to be an array but now this became a collection and that's why i give an error so in order to change that collection to an array what we need to do is we need to map each of the item and we need to pass the function first so we need to pass a function and map each of the item to a type of string okay first what we can do is we can let's just do one thing let's convert that to an array we can directly convert that to an array so since we are plugging the id and two array will generally convert this collection to an array so this will work when we select all of the items but we'll get another error that i'll be showing you what type of error do we get so if i click on select all then all of the 10 records that are displayed here are checked but if i try to uncheck any one of these then we get an unusual behavior as you can see we can't select unselect any of these so in order to fix it fix this error what we need to do is we need to map each of the value and in order to map it what we need to do is we need to pass a function and we want to map each of the item to a type of string so now what ah so this function is basically doing is each of the ids from our students array will be mapped to a type of string okay and then we finally convert that to an array so let's save that and let's go ahead and reload our browser and now if i click on this select box then all of the items are displayed on this page are now selected and if i click on any one of these items then we get the usual behavior that's which that actually should be like and our error is now solved and what i also want to do is whenever i uncheck any one of these boxes then what i want to do is i want to disable this button as well so in order to do that we need to define one more function that is updated checked so whenever the checked ad is updated then what i want to do is i want to assign the select page value to false okay so whenever the checked array is updated then i want to assign the select page value to false so now again we go ahead and reload our browser and if i select all of the checkboxes are selected and if i click on this checkbox then this should be disabled okay and yes everything is working as expected and the next step that i want to do here is whenever i select this checkbox then i want to show a message here that you have selected this many items and do you want to select all and show a button here and when the user clicks on select all then i wanna i wanna select all of the records that we are fetching from our database okay so let's go ahead and implement that as well so first step let's define a message here that is you have selected this many items and we want to implement that in our students.blade.php and i'll be displaying that message here so let's define a div with a class of call md 10 okay and now let's define a message you have selected so first i'll define the markup and then we'll be looking at the logic of how we can implement this so you have selected 10 items do you want to select all and let's also define one more that is let's say we have 500 items and we want to show the question mark at the end and let's also define a href tag here select all and let's give it a class of margin left of 2 okay so this message should be displayed here and now again let's go ahead and reload our browser and we see that we have this displayed here again let's also define a margin bottom of two and everything should work everything should look good here so if i select this checkbox then i want to display this message and when i click on select all then i want to hide this button and also select all of the items that we are fetching from our database okay so let's go ahead and define work on the logic so i want to display this message when our select page property is true okay so if this property is true then i want to display this message so let's go ahead and define the logic so if select page is true then i want to execute i want to show this message so reload our browser and when i so now it is not visible if i click on this then we see a message that you have selected 10 items do you want to select all and now when i click on select all then i wanna show another message that you have selected this many items and also hide this button here so the way we can do that is by okay let's define this inside another div let's save that and let's define one more property in our students or php that is select all so this value will be true when the user clicks on select all so all the values are selected so it indicates that all of the records of our database of our tables are selected and not only this current page okay so when the user clicks on select all then i want to set the value of select all to true okay so we have a function so we have a link here and let's define the wire equal to then i want to execute a function called select all so we haven't defined this property yet so let's go ahead and define that here so function and then select all then what i want to do here is i want to set this select all to true and okay and i want to display this message if the select all value is not true okay so i'll just define that later what i want to do is i'll just copy this part and when the select all value is true then i want to show another message that is you have selected all maybe 500 items and then i don't want to sow this message okay so this should work fine so now i want to show this message if select all property is true and i want to show this message if select all property is false so we can keep that here and if select all property is true then i want to show this message otherwise i want to show this message so i hope you understand the logic here so if select all property is set to true then we are we'll be distilling displaying this message and if that is false then we'll be displaying this message and we have another parent if condition here so this all this all of the message all of this message this whole will div will be displayed if only the select page property is true so now let's go ahead and reload our browser and we haven't okay we have already defined the logic here so we have a function so we have defined the wire click select all and when this function is executed then we set the select all value to true okay so we have that so now let's go ahead and reload our browser and if i click on this check box then we see a message that you have selected 10 items do you want to select all 500 okay so the logic here is currently the select page value is set to true and select all is set to false and so its select page is set to true then we see this div and select all is set to false that means this function is not executed so this message is displayed here and now if we click on this select all function then in return what it's going to do is it will go and execute this function and what it's going to do is it will set the select all value to true so when this select all value is set to true then this function this condition will be true and will we should see this message okay so when i click on select all then we see that we have you have selected all 500 items okay so the logic of displaying the message depending on the user interaction is now working fine and what i want to do here is you have selected okay i want to show uh show the count of the checked array here and do you want to select all and this value will be the student's total value so this is the pagination property we get with the laravel so since we are paginating the records this will show the count of the records that we are fetching from the database okay so let's go ahead and again check it once more so if i select this then we see that you have selected 10 items you want to select all 38 and then we see a message that if i click on select all then you have selected all 500 items so i need to change that as well so i can just copy this and paste that here so this would work fine and one last step that we need to do is when we click on select all so when we click on select all then what i want to do is i want to select all of the items that we are querying from the database and not only this page but all of the pages as you can see here we are only selecting 10 items from this page and if i go and check the next page then we don't have that we don't have the record selected so when the user clicks on select all then we should select all of the values so basically what we will be doing here is we'll be setting the checked array we'll be putting all of the ids in our checked array so we'll be setting these assigning our checked array with all of the records from our database so how do we do that so in order to implement that what we need to do is we need to once again since we are paginating this property here so it is basically fetching 10 records at a time so by default it is fetching 10 records at a time so since we are paginating it we need to what we need to do is we need to separate out our query into another computer property so what i'm gonna do is i'm gonna cut this part and define one more function here that will be okay let's define that here the function get students query properties this should be property and what we want to do here is we want to return this query so before the pagination so this is actually in the form of the query builder here so we are not paginating this results so these are all the records that we are fetching from the database before the pagination actually is done here so now when the when we call the get students property then we will be paginating the results so return students query and then paginate the results okay we need to assign this students query and then we should paginate it okay now everything should work as before as you can see it is working as expected and if i select all then we get all the selected items and when i click on select all then we have selected 38 items so now what we can do is since we have separated our query into another get property now what we could do is when i click on okay where's that function so when i click on select all then what we are doing here is we are selecting all of the then we are assigning the select all property to true and then we also want to assign our checked array to all of the ids from our database so now what we can do is we can actually call this property here so get students query property so this is returning all of the records before the pagination is actually happening so this is recording all of the records from our database before the pagination occurs so after this so get students property is actually depending paginating the require results but the students query property is only building the query here without performing the pagination so what i can do here is i can assign this student's query and then like we did here in our so like we since we are assigning the checked array to the get this student and then plugging the id then i can actually copy this whole part and then assign it here so we are accessing the student's query computer property and then plugging the id and then mapping each of the id from the students query to a string and then converting that to an array so i hope you understand the logic here we have only separated the query into two parts one is the get students property and another is get students query property so query property will be returning all of the students from our database without the pagination the students is only is gonna return the students query along with the pagination okay so we are assigning the pagination later and when the user clicks on the select page so when the select page value changes and if that value is true then we are assigning the checked array to the student's computer property and not the student's query computer property so this is returning the paginated results and when the user clicks on select all then what we are doing is we are assigning the checked array to the students query so this is without the pagination and then we are performing the plugging the ids and then mapping each function to each item to a string and then converting that to an array so the reason we are converting that to an array is because since we are checking here whether in our array we have this student id so in in array expects parameter first to be a key and then the second so in array expects parameter first to be a value of the array and the second parameter has to be an array so this has to be an array and that's why we are converting our checked property to an array here so the reason behind that conversion is to convert that to an array so this has to be an array okay so our logic everything is working fine here so now let's go ahead and try it once more so when i click on select all then i see a message that you have selected 10 items do you want to select all 38 and when i click on select all then we can see that we have i you have selected all 38 items and we also can see that we have an array of with check 38 and we have the message delete and export so now we can delete all of the items or we can also export all of the items and yes that's how we can actually implement uh selecting multiple items assigning the selecting all of the items from our data table or selecting only a part of the items from the database and we can also do what we can also do is since we are querying the results after the page along with the search results here so as you can see here so student with the classroom section and when this selected class is true then we are running this query and when this selected section is true then we are running this query and then also performing the search here so now if i go ahead and okay let's filter it instead of searching so i want to filter it by section a and now we have these values here okay we don't get any value of class 2 so we are filtering them by class one and as you can see we can we can we see that we have multiple results here so since we are getting 18 results now if i go ahead and select this then we are selecting only 10 items and do you want to select all 18 yes then we are currently selecting 18 items and we can also double check that and now what i want to do is i want to delete all of these so if i go ahead and delete it then we shouldn't we shouldn't see any record from class one in our data table so all of the values from the class one should be deleted so let's go ahead and delete it and all of these values were deleted so once the these values are deleted then what i want to do is i want to assign the this the select all property to false and then also select page property to false okay so this is the final thing that we want to do here so when we assign with this checked to an empty array then what i want to do is i also want to set the select all property to false and i also want to set the select page property to false as well so again let's go ahead and reload our browser and everything should work okay we only have class 2 section a and b so now if i go ahead and filter it by class 2 section a we don't get any results okay we are getting going to page two so class two section a okay so since we are getting the uh 10 records here so if i go ahead and select all and you are currently selecting 10 items do you want to select all 10 okay that's fine select all then you have you are currently selecting all 10 items now if i go ahead and delete that and we should see this message disappear and this all this check box should also be disabled okay so if i click on ok then selected records are deleted successfully and since we have the applied filter here so now if i go ahead and revert back then we see all of these records so our pagination filtering property and bulk delete everything is working so i hope that you like the video and okay one more thing that i want to show here is when i click on these values so we have a small bug here so if i am selecting multiple values here and while the user is selecting all of these four records what if they go ahead and delete a single item from here so when the user clicks on ok then notice the bug here since we are selecting four items and when i click on this then what's actually happening is we are currently selecting three items but we see a message we see the count of four here so that's a small bug which i want to fix here so we actually have multiple solutions for this problem so one of the solutions could be when the user is selecting the multiple items from here so when the user selects these check boxes then what we could do is we could actually hide this delete button so let's go ahead and do that so we have in our students.php blade.php we are deleting that button here okay so what i want to do here is if the checked arrays set okay if the checked array is not set then i want to show this button otherwise i want to hide that so if this is not so if this is null then we'll be showing that and if it if it consists of only a single value or more than that then then i want to hide this button okay so if you go ahead and reload our browser and when i click on select then our button gets disappeared so this is one of the way that we can implement this so this way the user cannot delete the items and we won't see that error and when i unselect any of any all of these then we see that button again so this is one of the ways and the other way that we can implement this is by going to our students.php and since we are deleting uh when we when we delete a single record from the database then what i wanna what i wanna do is i want to delete that id from our checked array as well so that could be another solution for this so let's go ahead and do that and the way we can do that is by defining is by calling a function called array diff and i also checked that on the internet i didn't knew about this syntax here so i just opened up stack overflow and so area without the strawberries value will be added if and this takes the array and another value with an array of the key that we want to delete okay so we should pass here this checked and another array with the value of our students id so since we are deleting this student id so since we are deleting the record from our data uh since we are deleting this student id ids record from our database so when we delete this record then what i want to do is i want to remove that id from our checked array as well okay so and we the way we can do that is by calling this function array diff and this takes the first parameter as the array itself from where we want to remove and the value that we want to remove so we are actually specifying the student id that we want to remove and that's and this result get gets assigned to our this checked array okay so this should work so let's go ahead and reload our browser and now if i select multiple items here so now multiple items and we have which checked with the value of four and when i delete a single record then we should see the value of [Music] this to be increased by one okay so click on ok then as you can see the widget array consists of three items only and that's how we fix the error anything else we don't have anything else i think okay so in this tutorial series we implemented multiple features that we could implement on a data table like the pagination feature the filtering feature multi-level filter air filtering like filtering by class filtering by sections so we you can actually implement this functionality on multiple other use cases as well searching the tables searching through multiple columns and searching through relations deleting single records deleting multiple records and exporting the data to an excel file using the package laravel excel and also deleting these records and a bunch of features so it was a very lengthy series or as you can see we implement implemented quite a lot of features which you don't really find on the internet and i hope you like the content and if you do like it then like the video and do subscribe to the channel and hit the bell icon to stay subscribed for the future releases so i'll be also be posting some more uh tutorials related to livewire and also maybe i'll also be posting some real projects using livewire in the future so stay tuned for that and have a great day and i'll see you in the next one

Channel: Tapan Sharma

Views: 3,828

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

Id: B1ZMj1t-waI

Length: 114min 58sec (6898 seconds)

Published: Thu Jan 14 2021