Implement Selectable Columns and Bulk Delete Feature | Lets Build Datatables With Laravel and Vue.js

so in this fourth part of our view data table series we'll be implementing features like selecting multiple columns so i can select these records and then with these i can perform operations like delete and export so in this part we'll be implementing uh selecting multiple records and deleting those multiple records in the another part we'll be discussing about exporting these let's start by deleting single records from the database before that let's open up our video studio code and we have a delete button here for every single record so we have a button and on click what i want to do here is delete let's define a function called delete single record and let's pass in the student id and let's go ahead and define that function so we have selected section i think these are watchers so on the methods let's define that here delete single record this will receive the student id and here we need to we also need to define api route so let's go ahead in our api.php and this will be of type delete and we'll be using route model binding route delete student slash student and here i want to go to student controller class and the function that i want to call is destroy since you are deleting a single record and let's also define another prefix or delete so you can actually do whatever you like whatever you are comfortable with so now let's go to the student controller and define a function called destroy so here we will be getting that student and what i want to do here is let's write down the student id in order to check whether okay let's just send the id in order to check whether our code is working or not so now in our api in our students index.view what we can do is we can make an api request to excel start delete and our route will be slash api slash student slash delete slash and the id of the student so this will be student id and then what we can do is so since we will be getting the response here what i want to do is let's just console.log this value console.log response dot data save that and we have the npm run watch for running and now if i go ahead and reload our browser enter ctrl shift i to open up our inspector to inspect we open up our bacteria website inspector and now let's open up the console so we have some property error converted property function of undefined okay that's a bootstrap error so let that be and now if i go ahead and click on delete then i'm getting the id of one i go ahead and click on delete for another button then i'm getting the id of two so our code is working fine and the only thing that we need to do here in our api in our studentcontroller.php is we can actually delete the student so student delete and here what i want to do is i'm going to return a response with no content this will send the status as 200 and the body will be empty so here what we want to do is when we execute that function when we get the response then i want to fetch the students again in order to refresh our table so save that and now if we go ahead and reload our browser and if i click on delete for the first record then this should be deleted from the database and the data table should be refreshed so yeah our code is working fine so it would be a nice feature if we could uh give our use feedback to the user that the student was deleted successfully for that what we'll be doing is we'll be using a package called view toast notification so for that let me just copy this code and open up in our terminal open up our terminal and i'll just install this package and i'll be right back so the package has been installed successfully as you can see and in order to use this what i need to do is i need to import that from the package from the npm module in our app.js so we have that here and let's paste that and we also need okay we need to import our default theme let's copy and save that as well and we don't need anything else here so this is fine so in order to use this uh toaster notification what we can do is let's go to our visual studio code and when we get the response then here what i want to do is this dot post dot success and here i want to pass a message that says student deleted successfully let's check whether this is fine okay this looks good let's save that and now if we go ahead and reload our browser and when i delete a single record we are getting an error that unknown type error cannot be probably success of undefined what's the error here okay i forgot to specify one more thing that is view dot use view toast which will be in our app.js so here we could we need to define this and one more thing that is i want to specify here i want to specify a position here so for that let's go ahead and pass in an object the position that i want to place is on the top right save that and now one last time if we go ahead and reload our browser and when i click on delete then we get a toasted notification that the student was deleted successfully okay this looks good so our single file deleting feature is working fine single record deleting feature is working and our next step is i wanna implement this selecting multiple checkboxes from our data tables so let's go ahead in our student index.view and define a new property so on that property i want to store all the ids of the students all the ids of the checked students for that let's define an array or maybe you could also define an object but array will also work fine so we have an array select array so we'll be storing all the ids of the students that are checked and let's wire model this with our input type of checkbox so here the value will be student dot id and let's remodel this with our checked property and notice one more thing that views yes is so awesome that whenever we remodel any input type of checkbox with an array then whatever we check through in the loop so let me just show you what's what it will actually do here so let me open the view depth tools and open up student index so i have a checked array which is empty currently so now if i go ahead and check this array okay this is a problem because it should be we should bind it so we should specify that colon go ahead and reload again and open up the dev tools we have a checked with an array empty array if i go ahead and click on this item then we you can see that we have an array which is with the id of five if i click again then the array increases so it automatically performs the updating of the array whenever we select these check boxes so our v model property is working absolutely fine and now what i want to do is whenever i select on any of the check box then i want to show this button with these options so for that let's go ahead on the checked we checked button here and i want to show this so we'll be using v if if the length of the checked array is greater than zero to save that and now since we our checked array is empty then we won't see the check box and if i select on any of the item then the check box is visible and see as you can see since we are using uh javascript so there's no any uh request to the server which basically which generally happens in the live wire the view is much faster and efficient in terms of this kinds of operations in comparison to live wire so now here what i want to do is i want to show the count of the checked items so that will be checked dot length and whenever i select these items then the count of that then the counter also increases so that's kind of cool and now what i want to do is i want to delete the items that are checked before that when i click on delete then i want to execute a function whenever i click on this link then i want to execute a function called delete records and since this this is an a tag what i also want to do is i want to prevent the default behavior of the href tag so this will execute the delete records method and let's go ahead and define that function so in our methods i'm going to define another function called lead records so here i want to make an api request so that will be xcos dot delete i want to make an api request to slash api slash students flash pass destroy since we are deleting multiple records and here i want to pass the ids of the students so i can actually pass the array and then we get a response so if the response dot status is equal equal to 204 then what i want to do is i want to show a message let's show a toaster notification dot success that selected students were deleted successfully and we also need to execute the this get students method here as well let's save that and let's go ahead and define the api slash student slash masks destroy api so in our api.php we can actually copy this to api students mass destroy and we get an area of students so which i want to go to mass destroy function let's save that and go to the student controller and define that function and we get an array of students so here what i want to do is i'll just write a write a log about the received students we can actually return it but okay it's fine what i'll do is i'll just go to the storage logs and laravel.log let me just clear everything from here save that and okay since we are only logging this students so i wanna i'm doing this thing because uh whenever we send an array from our parameters then what it will do is in it will convert it it won't actually send the array but will it will send the values as strings so let me just show you what i'm actually trying to say so whenever i select multiple items let me just select three items and when i click on delete then if you go ahead now into our laravel.log then you can see we are only getting 567 as as value of string type so this is not an array so we get a string type value so you know we need to convert this to an array type and then delete these delete the students which has these ids from our database for that what we need to do is we need to convert so we have a function we have a function called x load that takes the separator as the first argument and the students the string as the second argument and we want to store that in in a variable called students array and the way we delete these records is by calling student where key is this array and this is actually where condition this will search through the students table where the key matches with this student's array the ids that exist on this student array will be fetched and then we want to delete those records so now those students are deleted and let's send an http response of no content so now everything should we should be working fine so you know api.php what we are doing is we are actually uh executing uh we are defining a new api for students must destroy and we get the students as a parameter which goes to student controller and must destroy so here what we are doing is we get the student array as an string as a string of comma separated values then we are converting that to an array and then we are querying the students model where the key matches with this student's array and then delete those records and then we are returning a response of no content so no content means we are sending a status of 204 and then in our student.index view what we are doing is we are making an api request to de api request to api student mouse destroy and passing the checked array and then we get the response it so the response of status is equal equal to 204 then we show a toaster notification that selected students were deleted successfully and then we are fetching the students again so if the status is not 204 or if there's something another message like if we get a response of 500 then we can sue another message saying that something went wrong and we can actually show the error message so for now everything should work fine as i've already tested this so let's go ahead and test it again so we have three records so the first one is enabled so keep that in mind to take care of that so if i go ahead and delete this then we see that these students were deleted successfully so we are still seeing the we checked value here we checked button here so for that what we need to do is whenever we get a success message success response then what i want to do is i want to reassign that array to an empty array now everything should work fine if i go ahead and select two records and delete then those records are deleted from the database we have uh we reassign the checked array to an empty array and everything works absolutely fine so now the next thing that i want to do here is when i select so when i check or check the this array this checkbox then i want to select all of the records from this table so for that what we need to do is let's go ahead in our we have that in our input type of checkbox this is the one that we need to work on so let's remodel this with the with a new property called select page so when this when the check box is checked then that value will be set to true and if it is not checked then that value would be set to false so let's go ahead and define the select page property so this will be also by default and if you go ahead and check that in our browser we have select page as false and if i select this then this value changes to true as you can see here so now when the select page value changes so in order to track that we need to define a watcher let's define a watcher for the select page so whenever this value changes then what i want to do is so if this value is true then what i want to do is i want to loot through the students so this.students.data dot for each maybe this is the actual syntax for for each and for each student what i want to do is i want to push the student id to our checked array so here in order to push the checked student id to our checked array we have the push function so here i want to push the student id to our checked array so we are looping through the data and then we are pushing the array checked we are pushing the student id with the checked array so let's go ahead and test this out so now if i select this as you can see all the records from this page are selected and when i uncheck this then whatever and then i want to uncheck all of the records before that we have else condition so when the this value is false then we'll be executing the else condition in that case i want to empty that array so this dot checked will be an empty array now let's go ahead and save that and reload our browser again now if i select this then all the records are selected and if i again select this then that value will be so this value will be set to false and will be will have an empty array we will have an empty checked array yeah everything is working perfectly fine so our next step is what we're gonna do here the next step will be okay one last final thing that i want to do here is when i select this item then i want to show a menu that you are selecting currently selecting this much of items and you want to select all and when i click on select all then i want to select all of the items so for now as you can see we are not selecting all the items we are only selecting 10 items so i'll be implementing that feature so let's start working on it so in order to show a message that we are currently selecting this number of items let's go ahead in our visual studio code and let me show where the code is where that part is so here we have this div i want to wrap that inside another div and okay maybe we don't need to wrap this so i want to show this div if and only if the select page property is true [Music] let's go ahead and reload and when i select these items then i don't see that message but when i select this check box then i can see then as you can see we are seeing this you are currently selecting all 10 items and here i want to show the i count of the items that are being selected so for that we could use the length of the checked array so this okay we don't need this checked dot length let's say that this is not check box this is checked dot length and resolute once again and as you can see we are seeing you are currently selecting all 10 items then also one implement this feature so if we click on you have selected you are currently selecting 10 items all 10 items okay we have selected 10 address you want to select all so when i click on this button then i want to show this message and when i click on the select all then i want to show this message okay so for that it got a bit of mismatch maybe okay we also need to define one more property that is select all so when i click on select all then i want to turn the then i want to make the select all value to true so if the select all property set to true then i want to show that you are going to be selecting all then okay we i want to show all the values of the all the i want to show the count of the all the items so for that i'll just implement that later but here it will be v else so if the select all is empty or if the select all is set to false then i want to show this vls condition and i want to show all of these only if the select page is set to true so for that let's wrap that inside a div and okay we don't need that since you have a wave in here i can actually use that v if select page so if select page is set to true then we'll be executing this function and if the select all is set to false then we'll be showing this message and if the select all is set to true then we'll be showing this message so now let's go ahead and test it out so if i select these items so if i select the check box then you can see that you have selected all 100 10 items you want to select all 25 and when i click click on the select all so we have that where's that okay we have selected 10 items you want to select all okay we have that here so what i want to do here is at click dot prevent i wanna execute a function called select all records we can define a function for select all since obvi i already have a property named select all let's save that and define that function let's define that here select all records and here what i want to do is i'll just change the value of select all true so what it will do is it will change the value of select all to true and the message that will be showing here will change so now only thing that we need to do is we need to show the count of the items and also select all of the items in our data table so for that so the next step that i want to do here is i want to show a total total of the student item here so you are currently selecting so this is fine this will display the length of the currently current page so total records of the current page but what we what if we want to get all the records of the count of the records that we are that we actually have on the database so for that what i'm going to show here is i'll be showing the students index and in here as you can see we have the students we have the students property and in that we have meta data so in here as you can see we have quite a few properties here so current page from last page links page per page 2 and we have a value we have a property called total so we can actually use this total variable on the total in order to display the total records so you have uh selected in here what i want to do is i want to display the checked dot length instead of 10 and do you want to select all so instead of 25 what i want to do is i want to define the students dot meta meta dot total we go ahead and check that so students dot meta dot total okay so let's save that and when we click then we are going to select all the records and okay this should work fine so we are only updating the total count so if i go ahead and select that you have selected 10 items do you want to select all 41. so the only thing left to implement here is when i click on select all then i want to select all of these records that have been displayed so all the paginated values also so now the next step that we out that i want to do here is i want to define a new api so let's go ahead and define a new api saying students all which will go to student controller and let's define a new function all all students so basically what this api will do is it will return only the ids of the students so we'll be returning only the ids of all the students and then assign that those ids to the checked array so i hope you get the idea so in here what i'll be doing is i'll define a new function called all students and then here i'll just return student and i want to plug the id this should work fine so now if we go ahead in our students index.view so when i click on select all records then what i'll be doing is i'll be making an avi request so where's that select all records we set the select all to true and instead of first making the select all the true let's make an api request excels dot get to slash api class student slash all and then we get a response so let's i dump the response dot data let's go ahead and test that browser so when i click on select all then okay you need to select all and as you can see we are getting all the ids of the students then students that are available in our database now what we want to do here is we want to assign these values to our checked array the response.data will be this dot checked equals response data and then i want to set the select all true so let's save that and see whether this works or not according to our assumptions this should work if i select this then the 10 records are selected and if i click on select all then we can see we are currently selecting all 41 items and we have the checked area of 41 and if i click on page 2 then the state is maintained all over our pages this is really really cool so now what we can do is so we have seen this we we have already implemented the selecting all 2041 items so if i click on again click on it so the checked array gets empty so i want to show a small bug here so as you can see when i click on this then you are currently selecting all 10 items so here what i want to do is when i uncheck that so that is in the watch page of select page maybe so here what i want to do is i want to reassign the checked array to an empty array and then i want to set the select all to false save that and now i select this i select the 10 items and click on select all all these 41 items are selected and uncheck it and again if i check it then you have selected 10 items you want to select all so this is working fine and i want to show one more bug so if i'm selecting if i'm selecting three records and then when i go ahead and select the check box to select all the records then as you can see it should select actually 10 items but we are currently selecting 13 items so the ids that we selected earlier got repeated again so in order to prevent this what we can do is let's go ahead to our select page and if here what i want to do is i want to reassign the checked array to an empty array and this should work fine let's go ahead and reload our and when i select these three items and select this check box then you have selected 10 items you're going to select all so this is working fine and one more thing one last thing that i want to do in this video is so since i'm selecting 41 items here and while i'm selecting these items what if i go ahead and delete this item from our record so let's check out the bug so if i click on this then the item got deleted from our database but we have the checked array of 41. so what i want to do is i want to remove that id from our checked array so in order to do that let's go to our visual studio code while we are deleting the single record then what i want to do here is if the record gets deleted then what i want to do here is i want to assign the checked array to this chart checked dot filter so on a filter the all of the ids in our array and i want to only keep the items where the id is not equal to the student id so this should work so what we are doing basically doing here is we are filtering through all of the items from our checked array and only keeping the ids where the id is not equal to this student id so the final result that we'll be getting here is we'll be removing removing the student id that we deleted from our database now let's go ahead and save that reload our browser let's select these 10 items and click on delete so as you can see we have already maybe you have noticed this so you have selected 10 items earlier we have nine and the total also got reduced by one so this is working fine and maybe a few things that we need to implement this so this video is getting quite lengthier but i don't want to implement the that on the other video i just want to implement it here so that is the confirmation message so when i click on this select delete this or when i click on this delete then i want to show a confirmation message that is are you sure you want to delete this and then when i click on ok then only i want to delete that record so for that let's go to our visual studio code so in our visual studio code when i click on delete single record here what i want to do is on click i want to confirm are you record and along with this i also want to specify another parameter that is event dot stop immediate proper negation so this is a uh this is basically a javascript function so if i when uh when i click on this confirm button and when i click on ok then this function will be executed and it will stop the propagation execution of code after this line of code so anything after this so at the right click won't be executed and if i click on okay when i click on ok then this function will be executed and when i click on cancel then anything after this code won't be executed so even dot stop immediate propagation is gonna do that so let me just copy this part so from here to here and paste that in our delete button as well so here let's just specify that here so let's save that and now if i go ahead and click on this then i can see uh are you sure you want to delete this record when i click on cancel nothing's gonna happen and when i click on okay then that regards gets deleted from our database so this uh was quite lengthy video the you like the content and in the next part we'll be implementing the short functionality we do have some other features to be implemented so tune in for the next part and i hope you like the content so if you like the content do subscribe to the channel and i'll see you in the next one

Channel: Tapan Sharma

Views: 402

Keywords: vuejs, vue js tutorial, filtering using vue.js, laravel vue.js, select all checkbox vue.js, vue.js select all checkbox, vue.js pagination, laravel tutorial, vue.js datatables, tapan sharma, filtering with vue.js, laravel vue.js for beginners, vue.js search, bulk delete using laravel, laravel vue.js tutorial, delete multiple records with vue.js and laravel, bulk delete with vue.js and laravel, laravel and vue.js datatables

Id: euPEVkIi5B4

Length: 39min 26sec (2366 seconds)

Published: Fri Apr 16 2021