Let's Build Some Datatables Using Livewire | Implement Selectable Columns and Bulk Delete

so in our previous video we implemented the pagination feature using live wire and you know in this video we are going to be this we are going to be implementing the bulk delete feature using live wire 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 then we will delete those records and also show 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 [Music] 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 accident 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 going to do is i'll be defining a property called checked here so this is going to be a type of array which is going to store all the ids that we are that we will 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 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 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 this 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 addy 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 3 4 and so on so it's working fine now whenever i click on the delete then i want to 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 it says r okay i think i should write that in a single quote are you sure you [Music] 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 is 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.top immediate propagation is gonna 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's 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 we pass in so where key generally takes not generally but where he takes an uh an array of ids so if we have an id of one two and three so if i want to delete these records from the database then what what it's gonna do is okay let's also include the get condition here so get builder and what i want to do is i want to die dump the students here okay so this is going to get all the students where the id is 1 2 and 3. 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 what happened 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 [Music] 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 where 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 selected records where deleted successfully let's save that and now if we go and reload our browser once again and i want to delete these three records which 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 width 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 and with the message are you sure you want to delete this 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 [Music] 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 id okay so delete single record let's go and define that function here students php component function and we'll be receiving the student id here student underscore id okay and to check whether it's working or not that's also diadump the id here 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 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 our fail 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 the type of info record deleted successfully okay 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 id student id here too [Music] and only we are gonna 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 return true form 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 and 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 so if 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 i hope you like it and in the next video we'll be implementing the search feature so we'll be implementing searching the multiple columns of a certain model and also searching through relationships so if a student belongs to a certain classroom section so we'll be implementing the section and class searching as well so stay tuned for that and i'll see in the next one

Channel: Tapan Sharma

Views: 669

Keywords: livewire, bulk delete using livewire, laravel datatables, search multiple columns using livewire, filtering using livewire, livewire datatables, laravel livewire, search through relationships in laravel, laravel, tapan sharma, laravel pagination, livewire search, laravel debugbar, laravel tutorial, livewire pagination, bulk delete using laravel, laravel search, laravel livewire tutorial, eager loading in laravel, datatables

Id: e9tpcKO_pT4

Length: 19min 32sec (1172 seconds)

Published: Wed Dec 30 2020