How to Update Delete Table row with jQuery Tabledit in Laravel

Are you looking for tutorial on Live Table Edit Delete Mysql Data using Tabledit Plugin in Laravel. So you have come on right post, because in this tutorial we have make discussion on How to integrate jQuery Tabledit plugin in Laravel framework.

We all know Live HTML table edit and delete or Inline table edit delete is very user freindly functionality and by this feature user can change or remove table row value by clicking on edit or delete button. In this tutorial, We will learn How to make live or inline editable HTML table with jQuery and Laravel framework. For this things, we will use Tabledit jQuery plugin, and that plugin will provide Ajax request for inline edit or delete table row data. This plugin will convert simple HTML into Inline editable table, so you user can make easily change or edit table cell value, or even User can also delete or remove table row data also.

Here we will learn How to integrate jQuery Tabledit plugin with Laravel framework. Here we will seen How can we apply jQuery Tabledit plugin functionality like inline editing or removing functionality on HTML table and it will use Ajax request for inline or live edit or delete Mysql data operation and in backend we will use Laravel framework. This plugin is compatible with Bootstrap 3 and Bootstrap 4 library. We all know Laravel is robust PHP framework for web application development, so if you want to build live inline table edit or delete application in Laravel framework, then you should use tabledit plugin for this feature. For this here we have make this tutorial, and below you can find step by step process for integrate Tabledit plugin in Laravel framework.

View Demo

1. Download Laravel Framework
2. Make Database Connection
3. Create Controller
4. Create View Blade File
5. Ret Controller Method Route
6. Run Laravel Application

1 - Download Laravel Framework

If you want to make any web application in Laravel framework, then first we have to download Laravel framework and install in our local computer. For this we have to go command prompt, and first run composer command. After this we have go to directory or folder in which we want to download Laravel latest vesion and run following command.

composer create-project --prefer-dist laravel/laravel laravel7

This command will make laravel7 folder and in that folder it will download the latest version of Laravel framework.

2 - Make Database Connection

Once Laravel latest copy has been download, so in next step we want to make database connection. Here we want to make Mysql database connection, for this we have open .env file and in that file we have define Mysql database configuration.

DB_CONNECTION=mysql
DB_HOST=localhost
DB_PORT=3306
DB_DATABASE=testing
DB_USERNAME=root
DB_PASSWORD=

After making database connection in Laravel framework, now we want to make table in mysql database. For this run following SQL script in your local phpmyadmin. It will make sample_datas table in your local database.

--
-- Database: `testing`
--

-- --------------------------------------------------------

--
-- Table structure for table `sample_datas`
--

CREATE TABLE `sample_datas` (
  `id` bigint(20) UNSIGNED NOT NULL,
  `first_name` varchar(255) COLLATE utf8mb4_unicode_ci NOT NULL,
  `last_name` varchar(255) COLLATE utf8mb4_unicode_ci NOT NULL,
  `gender` enum('Male','Female') COLLATE utf8mb4_unicode_ci NOT NULL,
  `created_at` timestamp NULL DEFAULT NULL,
  `updated_at` timestamp NULL DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

--
-- Dumping data for table `sample_datas`
--

INSERT INTO `sample_datas` (`id`, `first_name`, `last_name`, `gender`, `created_at`, `updated_at`) VALUES
(78, 'Johny', 'Smith', 'Male', '2019-10-11 21:39:09', '2019-10-11 21:39:09'),
(80, 'Larry', 'Degraw', 'Female', '2019-10-11 21:39:09', '2019-10-11 21:39:09'),
(81, 'Susan', 'Diener', 'Female', '2019-10-14 00:30:00', '2019-10-14 00:30:00'),
(82, 'William', 'Batiste', 'Male', '2019-10-14 00:30:00', '2019-10-14 00:30:00'),
(83, 'Butler', 'Tucker', 'Male', '2019-10-14 00:30:00', '2019-10-19 03:24:32'),
(84, 'Eva', 'King', 'Male', '2019-10-14 00:30:00', '2019-10-14 00:30:00'),
(85, 'Dorothy', 'Hays', 'Male', '2019-10-14 03:30:00', '2019-10-14 03:30:00'),
(86, 'Nannie', 'Ayers', 'Male', '2019-10-14 03:30:00', '2019-10-14 03:30:00'),
(87, 'Gerald', 'Brown', 'Male', '2019-10-14 04:30:00', '2019-10-14 04:30:00'),
(88, 'Judith', 'Smith', 'Male', '2019-10-14 04:30:00', '2019-10-14 04:30:00'),
(89, 'Delores', 'Schumacher', 'Male', '2019-10-14 13:30:00', '2019-10-14 13:30:00'),
(90, 'Gloria', 'Romero', 'Male', '2019-10-14 06:30:00', '2019-10-14 06:30:00');

--
-- Indexes for dumped tables
--

--
-- Indexes for table `sample_datas`
--
ALTER TABLE `sample_datas`
  ADD PRIMARY KEY (`id`);

--
-- AUTO_INCREMENT for dumped tables
--

--
-- AUTO_INCREMENT for table `sample_datas`
--
ALTER TABLE `sample_datas`
  MODIFY `id` bigint(20) UNSIGNED NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=96;

3 - Create Controller

In Laravel framework for handle http request, we have to make controller class in Laravel framework. In Laravel framework controller file has been store under app/Http/Controllers folder. For create new controller class file, we have to go command prompt and run following command.

php artisan make:controller TableditController

This command will make TableditController.php controller file. In this tutorial for make Live or inline table edit or delete mysql database operation, here in this controller file, we have make following method.

index() - This is the root method of this controller class. This method has been fetch data from sample_datas table and it will send this data to view file for display on web page.

action() - This method has received Ajax request for edit or delete mysql data operation. If it has received Ajax request for edit or update mysql data, then it will update or edit mysql table data, and if this method has received Ajax request for delete data operation, then it has been delete data from Mysql table.

app/Http/Controllers/TableditController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use DB;

class TableditController extends Controller
{
    function index()
    {
    	$data = DB::table('sample_datas')->get();
    	return view('table_edit', compact('data'));
    }

    function action(Request $request)
    {
    	if($request->ajax())
    	{
    		if($request->action == 'edit')
    		{
    			$data = array(
    				'first_name'	=>	$request->first_name,
    				'last_name'		=>	$request->last_name,
    				'gender'		=>	$request->gender
    			);
    			DB::table('sample_datas')
    				->where('id', $request->id)
    				->update($data);
    		}
    		if($request->action == 'delete')
    		{
    			DB::table('sample_datas')
    				->where('id', $request->id)
    				->delete();
    		}
    		return response()->json($request);
    	}
    }
}

4 - Create View Blade File

For display HTML output in browser, here in Laravel framework it has use view blade file, which has been store in resources/views folder. In this folder we have create table_edit.blade.php file. In this file we have include jQuery, Bootstrap and Tabledit plugin library link.

In this file, we have crate one HTML table and in this table we have add one id="editable" attribute. This attribute value is used for initialize tabledit plugin by using Tabledit() method. In this plugin, we have to define table column, which we want to convert into editable cell. We can define editable cell details in editable option of Tabledit method. This method will send Ajax request to action() method of TableditController class. Below you can find complete source code of view blade file.

resources/views/table_edit.blade.php

<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Live Table Edit Delete Mysql Data using Tabledit Plugin in Laravel</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>            
    <script src="https://markcell.github.io/jquery-tabledit/assets/js/tabledit.min.js"></script>
  </head>
  <body>
    <div class="container">
      <br />
      <h3 align="center">Live Table Edit Delete with jQuery Tabledit in Laravel</h3>
      <br />
      <div class="panel panel-default">
        <div class="panel-heading">
          <h3 class="panel-title">Sample Data</h3>
        </div>
        <div class="panel-body">
          <div class="table-responsive">
            @csrf
            <table id="editable" class="table table-bordered table-striped">
              <thead>
                <tr>
                  <th>ID</th>
                  <th>First Name</th>
                  <th>Last Name</th>
                  <th>Gender</th>
                </tr>
              </thead>
              <tbody>
                @foreach($data as $row)
                <tr>
                  <td>{{ $row->id }}</td>
                  <td>{{ $row->first_name }}</td>
                  <td>{{ $row->last_name }}</td>
                  <td>{{ $row->gender }}</td>
                </tr>
                @endforeach
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

<script type="text/javascript">
$(document).ready(function(){
   
  $.ajaxSetup({
    headers:{
      'X-CSRF-Token' : $("input[name=_token]").val()
    }
  });

  $('#editable').Tabledit({
    url:'{{ route("tabledit.action") }}',
    dataType:"json",
    columns:{
      identifier:[0, 'id'],
      editable:[[1, 'first_name'], [2, 'last_name'], [3, 'gender', '{"1":"Male", "2":"Female"}']]
    },
    restoreButton:false,
    onSuccess:function(data, textStatus, jqXHR)
    {
      if(data.action == 'delete')
      {
        $('#'+data.id).remove();
      }
    }
  });

});  
</script>

5 - Ret Controller Method Route

Once your all code is ready, then lastly, we have to set the route of Controller class method. For set route, we have to open routes/web.php file and in this file we have to define route for all controller class method.

routes/web.php

Route::get('tabledit', 'TableditController@index');

Route::post('tabledit/action', 'TableditController@action')->name('tabledit.action');

6 - Run Laravel Application

Afer setting of Route for controller class method. Now our Laravel Inline edit or delete application is ready by using jQuery Tabledit plugin. For this application, we have to go command prompt and run following command.

php artisan serve

This command will start Laravel application server and give you base URL of your Laravel application. For test above Live table edit delete Mysql data application, you have to enter following URL in your browser.

http://127.0.0.1:8000/tabledit

I hope this post will helps anyone who was looking for How to make Live or Inline update or delete table row data by using jQuery Tabledit plugin with Laravel framework.