Live Table Edit Delete with jQuery Tabledit in Laravel

hello friends in this video tutorial we are going to learn how to live table edit or delete my SQL table data by using Jerry table edit plug-in with laravel framework by using table edit plug-in it will convert simple HTML table into editable HTML table with edit and delete button option so user can edit or delete my SQL table data so here we have used chicory table edit we will make in line update and delete my SQL table data application in laravel framework so by using table edit plug-in with laravel framework we will make single page live edit and remove data application now let's start discussing this topic so this is our testing database and in this we have already make sample data table in this table we have already inserted some data so we will use table data for make in line edit and delete application by using table edit plug-in in laravel framework this is a laravel working folder first we want to make database connection so here we have open dot environment file in this file we have defined my SQL database configuration like host set to local host database name set to testing username set to root and password with blank value after making database connection we have to make controller class file so we have go to command prompt file and go to our laravel working folder directory and run composer command after this we have to run PHP artisan make controller with controller name table edit controller this command will make controller class file in controllers folder so we have go-to controllers folder an open table edit controller class file and in this file first we have write use statement with database class we will use this class for database related operation after this we have make index method this is the root method of this controller class under this method we have write dollar data variable is equal to database class with table method and under this method we have write table name sample data it will make select query for fetch data from sample data table after this we have right get method this method will run select query and return query execution data which we have stored under dollar data variable next we have Wright's return statement with view method with two argument in first argument we have right table edit view file name it will load table edit dot blade dot PHP file in browser and in second argument we have right compact function and under this we have right data so on table edit short blade dot PHP we can access data from this dollar data variable now we have go-to resources folder and then after go to views folder an open table edit dot blade dot PHP file and in this file we have already loaded curry library bootstrap library and curry table edit library link in this file first we have right at the rate CSRF directive it will create token which will from cross-site request forgery attacks next we have to create one HTML table for display data on webpage so here we have write table tag with ID is equal to editable and class is equal to table table bordered and table striped here we will use ID attribute to initialize curry table edit plug-in under this table we have create one table head tag and under this we have create one table row tag and between that tag we have create four table head tag for display ID first name last name and gender table column data after this we have create one table body tag under this tag we will print data for this here we have write at the rate for each directive and under condition we have write dollar data variable as dollar row variable under this directive we have create one table row tag with four table data tag and then after we have closed at the rate end for each directive in first table column we want to display ID table column data so here we have write dollar row with ID table column name in second column we want to display first name table column data so here we have right dollar row variable with first name table column name in third column we want to display last name table column data so here we have write dollar row variable with last name table column name and in last table column we want to display gender table column data so here we have write dollar row variable with gender table column name so it will print data in this table now we have moved to jacquard and here first we want to set up Ajax for set CSRF token value in the header of Ajax for this here we have write dollar dot Ajax setup function under this we have right headers option and in key we have right X CSRF token and in value we have right dollar input field name is equal to underscore token with value method it will store input hidden field value in this X CSRF token key after this we have right dollar with table ID editable with table edit method by using this method it will initialize table edit plug-in and convert simple HTML table into inline editable table with edit and delete button under this method we have right first option and here we have right laravel expression and between this we have right route method and under this we have right table edit dot action it will send request to action method of table edit controller in second option we have right data type and here we have right Sun so it will receive data in JSON format in third option we have right columns in this option we can define table column details under this option we have right identifier option and here we have right zero index with table column name ID this plug-in will use this ID value for edit or delete data operation after this we have right editable option and in this option we can define which column we want to convert into editable column so here in array format we have right index one with first name table column index two with table column name last so it will convert this to column into editable text box same way we want to convert third index table column into select box so here we have right three index with table column name gender after this we want to define select option so here in first index we have write male and in second index we have write female so it will convert gender table column into select box so this way we can define which column we want to convert into editable in this table edit plug-in then after we have write restore button option set to false here we do not want to required restore data button so we have set to false lastly in table edit method we have right on success callback function with data argument this function has been called if request completed successfully and it will receive data from server under this function we have right if statement and under condition we have right data dot action is equal to delete this condition will check if data dot action value is equal to delete then it will execute if block of code this plug-in will receive data in JSON format under this block of code we have right dollar and in selector we have right hashtag with data dot ID with remove method this will remove whole table row when je t'adore action value is equal to delete here action is a hidden field value which is created by using plug-in with the creation of edit save delete and restore button so when we have click on delete button then at that time hidden action field value will be delete and same way when we have click on Save button then action hidden field value will be safe have go to table edit controller class and here we have make action method with request variable as argument this method will received Ajax request for update or delete data under this method we have right if statement and under condition we have right dollar request variable with Ajax method if this method has received Ajax request then only it will execute if block of code under this block we have again right if block of code and under condition we have right dollar request variable with action variable value is equal to edit if this condition true then it will execute if block of code under this block we have right dollar data variable is equal to array in first key we have right first name and in value we have right dollar request variable with first name table column name in second key we have right lastname and in value we have right dollar request with last name table column name in third key we have right gender and in value we have right dollar request variable with gender table column name so this way we have store data in dollar data variable now we have right database class with table method and under this we have right sample data table name after this we have right we're method with two argument in first argument we have right ID table column name and in second argument we have right dollar request variable with ID variable it will add we're condition under update query lastly we have write-update method and under this we have right dollar data variable it will make update query and execute update query and it will update data next we have write if statement and under condition we have write dollar request variable with action variable value is equal to delete if this condition true then it will execute if block of code under this block we have right database class with table method and under this we have right sample data table name after this we have right we're method with two argument in first argument we have right ID table column name and in second argument we have right dollar request variable with ID table column name it will add we're condition under delete query next we have a delete method it will make delete query and execute delete query and it will delete data from my SQL table lastly here we have Reich's return statement with response method and after this we have rights on method and under this we have right dollar request variable it will send data to Ajax request in JSON format so here our code is ready for update and delete data now we want to set route for this index and action method for this we have go-to routes folder and open web dot PHP file in this file we have right route class with get method with two argument in first argument we have right table edit and in second argument we have right table edit controller at the rate index method so when we have type base URL slash table edit in browser then it will execute index method of table edit controller same way for action method here we have right route class with post method with two argument in first argument we have right table edit slash action and in second argument we have right table edit controller at the rate action so when we have type base URL slash table edit / action in browser then it will called action method of table edit controller after this we have a name method and under this we have write table edit dot action this is for set Ajax request route so here our code is ready now we have go to command prompt and run this command this command will start laravel application server and give base URL of your laravel application friends here in browser we have enter base URL slash table edit in browser then on web page we can see sample table data in HTML table format and here with data we can see edit and delete button also it button has been make by table edit plugin now first we want to check in line table edit data so we have click on this row of data then this whole row has been converted into editable row here to table column has been converted in textbox and one table column has been converted into select box and here Save button has been appear in this row now we have changed this row gender table column data and then after we have click on Save button after click on Save button table row background color has been changed that means data has been updated in my SQL database same way we want to check live delete data operation so for this we have click on this row delete button after click on delete button here we can see confirm button has been appear in this table row so we have click on confirm button after click on confirm button that row has been removed from HTML table also that means that row of data has been also removed from my SQL database also for checked data has been deleted or not for this we have refresh webpage after a refresh of webpage here we can see that table row has been removed from this table so that data has been removed from my SQL data also so in this video tutorial we have seen how to integrate table edit plug-in in laravel application for make live edit or delete my SQL table data application in laravel framework by using table edit plug-in with Ajax if you have any query or inputs regarding this video tutorial please comment your query or input in comment box or if you like this video tutorial please share with your friends or even you can also share on social media also

Channel: Webslesson

Views: 13,584

Keywords: tabledit, laravel, tabledit laravel, jquery tabledit laravel, laravel live update, laravel inline editing, laravel inline editable table, inline edit laravel, laravel inline edit table, editable datagrid laravel jquery, inline editing jquery laravel mysql, inline edit jquery, inline edit in laravel mysql, live table edit with jquery and ajax, editable table jquery laravel mysql, inline table editing laravel, jquery inline edit, inline editing in laravel with ajax, live table edit

Id: w351ZZvSwuA

Length: 21min 30sec (1290 seconds)

Published: Sun May 10 2020