Live Table Add Edit Delete in Laravel using Ajax jQuery

Live Table Add Edit Delete in Laravel using Ajax jQuery - 1

Live Table Add Edit Delete in Laravel using Ajax jQuery - 2

Live Table Add Edit Delete in Laravel using Ajax jQuery - 3

Live Table Add Edit Delete in Laravel using Ajax jQuery - 4

If you are looking for web tutorial on how to make live table application in Laravel framework by using Ajax and jQuery. So, you are come on right place, here you can find step by step by not only web tutorial but also video tutorial on Live table Insert Update Delete mysql table records in Laravel framework with Ajax and jQuery. We all know Laravel is a robust PHP framework for develop enterprise level application from scratch with write small PHP code and reuse same code. If we have use Ajax jQuery with Laravel, then it will make standard level web application.

In this post we have make Single page Live table or Inline table application in Laravel by using Ajax jQuery. In this application we will perform all CRUD operation like Create, Read, Update and Delete mysql database data from Laravel Live table or Inline table application. In this application use can Create or Add or Insert new data into mysql table from table, User can Update or edit exisiting records of Mysql table from this Laravel Live table. User can delete or remove mysql data from this Application. He can perform all this operation without going to other page, but from single html table he can perform all CRUD operation. That means here we will make Single page Live table crud application in Laravel using Ajax and jQuery.

Most of the application there main function is insert, update, delete and read mysql data. So, here we have make Single page Inline table application in Laravel with Ajax jquery, and perform all function from single page without refresh of web page. So, it will increase the speed of your web application, and it will also advance feature in your application. It will improve your application efficiency also. So, if Laravel framework will work with Ajax and jQuery, then it will increase your web presense user interface from user also. Below you can find step by step source code of Live table insert update delete mysql data using Ajax jQuery in Laravel framework.

Read Also

• Simple Login System in Laravel
• Insert Update Delete in Mysql Table - Laravel Tutorial
• Live search in Laravel using AJAX
• Upload Image in Laravel using Ajax
• Laravel Searching Column Sorting with Pagination using Ajax

Source Code

First we have to create Livetable controller, for this we have to go command prompt, and write following command, this command will create LiveTable.php controller file under app/HTTP/controllers folder.

php artisan make:controller LiveTable

Livetable.php

Once controller has been created under app/HTTP/controllers folder. In this class you can find following method for handle HTTP request of Live table crud operation in Laravel.

index() - This is the root method of this class, it will load live_table.blade.php view file in browser, once this live table controller has been called in browser.

fetch_data() - This method has receieved ajax request for fetch data from live_table.blade.php file, and this function return data in json format.

add_data() - This method has received ajax request for insert or add new records in mysql table from live_table.blade.php file, and this method return response once data has been successfully inserted.

update_data() - This method is used for update or edit mysql table records using Ajax. Ajax request has been send from view file to this method for edit or update existing of data of Mysql in Laravel using Ajax.

delete_data() - This method has received delete mysql table data request from Ajax, This method mainly used for delete or remove data operation in Laravel. Once this method has delete data then it send back response to Ajax request.

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use DB;

class LiveTable extends Controller
{
    function index()
    {
        return view('live_table');
    }

    function fetch_data(Request $request)
    {
        if($request->ajax())
        {
            $data = DB::table('tbl_sample')->orderBy('id','desc')->get();
            echo json_encode($data);
        }
    }

    function add_data(Request $request)
    {
        if($request->ajax())
        {
            $data = array(
                'first_name'    =>  $request->first_name,
                'last_name'     =>  $request->last_name
            );
            $id = DB::table('tbl_sample')->insert($data);
            if($id > 0)
            {
                echo '<div class="alert alert-success">Data Inserted</div>';
            }
        } 
    }

    function update_data(Request $request)
    {
        if($request->ajax())
        {
            $data = array(
                $request->column_name       =>  $request->column_value
            );
            DB::table('tbl_sample')
                ->where('id', $request->id)
                ->update($data);
            echo '<div class="alert alert-success">Data Updated</div>';
        }
    }

    function delete_data(Request $request)
    {
        if($request->ajax())
        {
            DB::table('tbl_sample')
                ->where('id', $request->id)
                ->delete();
            echo '<div class="alert alert-success">Data Deleted</div>';
        }
    }
}
?>

livetable.blade.php

This is view file of Live table application in Laravel and this file you can find under resources/view/livetable.blade.php. This file is used for display output on browser. In this view file you can find html, jquery and Ajax source code for fetch and insert data into mysql table in Laravel. For fetch data using Ajax, here we have make fetch_data() jQuery function which send Ajax request to LiveTable.php controller. For Insert, Update and delete mysql data using Ajax also, here you can find jQuery code in which Ajax request has been send to LiveTable.php controller class.

<!DOCTYPE html>
<html>
 <head>
  <title>Live Table Insert Update Delete in Laravel using Ajax jQuery</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.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.7/js/bootstrap.min.js"></script>
 </head>
 <body>
  <br />
  <div class="container box">
   <h3 align="center">Live Table Insert Update Delete in Laravel using Ajax jQuery</h3><br />
   <div class="panel panel-default">
    <div class="panel-heading">Sample Data</div>
    <div class="panel-body">
     <div id="message"></div>
     <div class="table-responsive">
      <table class="table table-striped table-bordered">
       <thead>
        <tr>
         <th>First Name</th>
         <th>Last Name</th>
         <th>Delete</th>
        </tr>
       </thead>
       <tbody>
       
       </tbody>
      </table>
      {{ csrf_field() }}
     </div>
    </div>
   </div>
  </div>
 </body>
</html>

<script>
$(document).ready(function(){

 fetch_data();

 function fetch_data()
 {
  $.ajax({
   url:"/livetable/fetch_data",
   dataType:"json",
   success:function(data)
   {
    var html = '';
    html += '<tr>';
    html += '<td contenteditable id="first_name"></td>';
    html += '<td contenteditable id="last_name"></td>';
    html += '<td><button type="button" class="btn btn-success btn-xs" id="add">Add</button></td></tr>';
    for(var count=0; count < data.length; count++)
    {
     html +='<tr>';
     html +='<td contenteditable class="column_name" data-column_name="first_name" data-id="'+data[count].id+'">'+data[count].first_name+'</td>';
     html += '<td contenteditable class="column_name" data-column_name="last_name" data-id="'+data[count].id+'">'+data[count].last_name+'</td>';
     html += '<td><button type="button" class="btn btn-danger btn-xs delete" id="'+data[count].id+'">Delete</button></td></tr>';
    }
    $('tbody').html(html);
   }
  });
 }

 var _token = $('input[name="_token"]').val();

 $(document).on('click', '#add', function(){
  var first_name = $('#first_name').text();
  var last_name = $('#last_name').text();
  if(first_name != '' && last_name != '')
  {
   $.ajax({
    url:"{{ route('livetable.add_data') }}",
    method:"POST",
    data:{first_name:first_name, last_name:last_name, _token:_token},
    success:function(data)
    {
     $('#message').html(data);
     fetch_data();
    }
   });
  }
  else
  {
   $('#message').html("<div class='alert alert-danger'>Both Fields are required</div>");
  }
 });

 $(document).on('blur', '.column_name', function(){
  var column_name = $(this).data("column_name");
  var column_value = $(this).text();
  var id = $(this).data("id");
  
  if(column_value != '')
  {
   $.ajax({
    url:"{{ route('livetable.update_data') }}",
    method:"POST",
    data:{column_name:column_name, column_value:column_value, id:id, _token:_token},
    success:function(data)
    {
     $('#message').html(data);
    }
   })
  }
  else
  {
   $('#message').html("<div class='alert alert-danger'>Enter some value</div>");
  }
 });

 $(document).on('click', '.delete', function(){
  var id = $(this).attr("id");
  if(confirm("Are you sure you want to delete this records?"))
  {
   $.ajax({
    url:"{{ route('livetable.delete_data') }}",
    method:"POST",
    data:{id:id, _token:_token},
    success:function(data)
    {
     $('#message').html(data);
     fetch_data();
    }
   });
  }
 });


});
</script>

web.php

Once you have completed working on Controller class code and view file code, lastly you have to set route for LiveTable.php controller class. In this class we have create index(), fetch_data(), add_data(), update_data() and delete_data() method for fetch, insert and update data using Ajax in Laravel. For set route in Laravel, we have to go to routes/web.php file. And in this file we have to write following code for set route.

Route::get('/livetable', 'LiveTable@index');
Route::get('/livetable/fetch_data', 'LiveTable@fetch_data');
Route::post('/livetable/add_data', 'LiveTable@add_data')->name('livetable.add_data');
Route::post('/livetable/update_data', 'LiveTable@update_data')->name('livetable.update_data');
Route::post('/livetable/delete_data', 'LiveTable@delete_data')->name('livetable.delete_data');

Lastly for run Laravel Live table add edit delete mysql data application using Ajax jQuery, we have to go to command prompt, and write following command.

php artisan serve

Once this command has been run under command prompt in which you have already run composer command, then you will provide you this http://127.0.0.1:8000 link, and just run following link for run Live table application.

http://127.0.0.1:8000/livetable