Laravel 6 Ajax Crud Tutorial Using DataTables From Scratch

laravel 6 DataTables Ajax Crud Tutorial – Today we are going to show, how to create crud operation using the yajra dataTable in laravel. We are going to show you how to create product list, create product, edit product and delete product with dataTable.

Today we are going to create product management using the yajra dataTables in laravel application. We will create easy laravel datatables crud operation using ajax.

Today we will create add, edit and delete using ajax without refresh (reload) a page on laravel datatables. We will use yajra dataTables Draw function to displaying the list without refresh.

Laravel DataTables Ajax Crud

Contents

  • Install Laravel 6 Setup
  • Setup database
  • Database Migration
  • Install Yajra DataTables
  • Create Route, Controller & Blade View
  • Start Development Server
  • Conclusion

Install Laravel

First We need Download fresh Laravel setup. Use the below command to download the laravel 6 fresh setup on your system.

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

Setup Database

After successfully download laravel Application, Go to your project .env file and set up database credential and move next step :

 DB_CONNECTION=mysql 
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=here your database name here
DB_USERNAME=here database username here
DB_PASSWORD=here database password here

Database Migration

Now we will create Product model and migration. Run below command

php artisan make:model Product --migration

The above comment will create a Model under app directory and a migration file named 2019_11_12_023506_create_products_table.php under path\to\your\project\database\migrations folder.

Now open migration file and put the below code

<?php

use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;

class CreateProductsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('products', function (Blueprint $table) {
            $table->bigIncrements('id');
            $table->string('title');
            $table->string('product_code');
            $table->string('description');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('products');
    }
}

Now we will run below command to create table

php artisan migrate

This command will create necessary tables in our database.

Install Yajra Datatables Package in Laravel

Now We will Install Yajra Datatables Packages in your laravel application. Use the below command and install yajra packages in your laravel application.

composer require yajra/laravel-datatables-oracle

After successfully Install Yajra Datatables Packages, open config/app.php file and add service provider and alias.

 'providers' => [
     Yajra\Datatables\DatatablesServiceProvider::class,
 ],
 
 'aliases' => [
    'Datatables' => Yajra\Datatables\Facades\Datatables::class,
 ]  

After set providers and aliases then publish vendor run by following command.

php artisan vendor:publish --tag=datatables

The above command will create a file named datatables.php under config folder

Create CRB (Controller,Route,Blade)

Add Route

Now we will add routes in web.php file as like below.

Open routes/web.php file

Route::get('product-list', '[email protected]');
Route::get('product-list/{id}/edit', '[email protected]');
Route::post('product-list/store', '[email protected]');
Route::get('product-list/delete/{id}', '[email protected]');

Create Controller

We need to create new controller ProductController that will manage two method. lets use this below command and create Controller.

php artisan make:controller ProductController --resource

Now open the controller let’s go to the => app/Http/Controllers/ProductController.php. Now create some methods for add user, edit user and delete user.

<?php
 
namespace App\Http\Controllers;
 
use App\Product;
use Illuminate\Http\Request;
use Redirect,Response;
 
class ProductController extends Controller
{
/**
 * Display a listing of the resource.
 *
 * @return \Illuminate\Http\Response
 */
public function index()
{
    if(request()->ajax()) {
        return datatables()->of(Product::select('*'))
        ->addColumn('action', 'DataTables.action')
        ->rawColumns(['action'])
        ->addIndexColumn()
        ->make(true);
    }
    return view('list');
}
 
 
/**
 * Store a newly created resource in storage.
 *
 * @param  \Illuminate\Http\Request  $request
 * @return \Illuminate\Http\Response
 */
public function store(Request $request)
{  
    $productId = $request->product_id;
    $product   =   Product::updateOrCreate(['id' => $productId],
                ['title' => $request->title, 'product_code' => $request->product_code, 'description' => $request->description]);        
    return Response::json($product);
}
 
 
/**
 * Show the form for editing the specified resource.
 *
 * @param  \App\Product  $product
 * @return \Illuminate\Http\Response
 */
public function edit($id)
{   
    $where = array('id' => $id);
    $product  = Product::where($where)->first();
 
    return Response::json($product);
}
 
 
/**
 * Remove the specified resource from storage.
 *
 * @param  \App\Product  $product
 * @return \Illuminate\Http\Response
 */
public function destroy($id)
{
    $product = Product::where('id',$id)->delete();
 
    return Response::json($product);
}
}

Create Blade View

First Create Button view

We need to create action.blade.php file. This file contain two button name edit and delete.

<a href="javascript:void(0)" data-toggle="tooltip"  data-id="{{ $id }}" data-original-title="Edit" class="edit btn btn-success edit-product">
    Edit
</a>
<a href="javascript:void(0);" id="delete-product" data-toggle="tooltip" data-original-title="Delete" data-id="{{ $id }}" class="delete btn btn-danger">
    Delete
</a>

Next, create list.blade.php file in resources/views/ folder and copy past following code.

<!DOCTYPE html>
 
<html lang="en">
<head>
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>Laravel DataTable Ajax Crud Tutorial - Tuts Make</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" />
<link  href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>  
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container">
<h2>Laravel DataTable Ajax Crud Tutorial - <a href="https://www.tutsmake.com" target="_blank">TutsMake</a></h2>
<br>
<a href="https://www.tutsmake.com/how-to-install-yajra-datatables-in-laravel/" class="btn btn-secondary">Back to Post</a>
<a href="javascript:void(0)" class="btn btn-info ml-3" id="create-new-product">Add New</a>
<br><br>
 
<table class="table table-bordered table-striped" id="laravel_datatable">
   <thead>
      <tr>
         <th>ID</th>
         <th>S. No</th>
         <th>Title</th>
         <th>Product Code</th>
         <th>Description</th>
         <th>Created at</th>
         <th>Action</th>
      </tr>
   </thead>
</table>
</div>
 
<div class="modal fade" id="ajax-product-modal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
    <div class="modal-header">
        <h4 class="modal-title" id="productCrudModal"></h4>
    </div>
    <div class="modal-body">
        <form id="productForm" name="productForm" class="form-horizontal">
           <input type="hidden" name="product_id" id="product_id">
            <div class="form-group">
                <label for="name" class="col-sm-2 control-label">Title</label>
                <div class="col-sm-12">
                    <input type="text" class="form-control" id="title" name="title" placeholder="Enter Tilte" value="" maxlength="50" required="">
                </div>
            </div> 
            <div class="form-group">
                <label for="name" class="col-sm-2 control-label">Product Code</label>
                <div class="col-sm-12">
                    <input type="text" class="form-control" id="product_code" name="product_code" placeholder="Enter Tilte" value="" maxlength="50" required="">
                </div>
            </div>
 
            <div class="form-group">
                <label class="col-sm-2 control-label">Description</label>
                <div class="col-sm-12">
                    <input type="text" class="form-control" id="description" name="description" placeholder="Enter Description" value="" required="">
                </div>
            </div>
            <div class="col-sm-offset-2 col-sm-10">
             <button type="submit" class="btn btn-primary" id="btn-save" value="create">Save changes
             </button>
            </div>
        </form>
    </div>
    <div class="modal-footer">
        
    </div>
</div>
</div>
</div>
</body>

</html>

Script logic

Next we will create script tag and write some code for showing list, create product, edit product and delete product. In this script, put the below of after closing of body tag.

<script>
 var SITEURL = '{{URL::to('')}}';
 $(document).ready( function () {
   $.ajaxSetup({
      headers: {
          'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
      }
  });
  $('#laravel_datatable').DataTable({
         processing: true,
         serverSide: true,
         ajax: {
          url: SITEURL + "product-list",
          type: 'GET',
         },
         columns: [
                  {data: 'id', name: 'id', 'visible': false},
                  {data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false,searchable: false},
                  { data: 'title', name: 'title' },
                  { data: 'product_code', name: 'product_code' },
                  { data: 'description', name: 'description' },
                  { data: 'created_at', name: 'created_at' },
                  {data: 'action', name: 'action', orderable: false},
               ],
        order: [[0, 'desc']]
      });

 /*  When user click add user button */
    $('#create-new-product').click(function () {
        $('#btn-save').val("create-product");
        $('#product_id').val('');
        $('#productForm').trigger("reset");
        $('#productCrudModal').html("Add New Product");
        $('#ajax-product-modal').modal('show');
    });
 
   /* When click edit user */
    $('body').on('click', '.edit-product', function () {
      var product_id = $(this).data('id');
      $.get('product-list/' + product_id +'/edit', function (data) {
         $('#title-error').hide();
         $('#product_code-error').hide();
         $('#description-error').hide();
         $('#productCrudModal').html("Edit Product");
          $('#btn-save').val("edit-product");
          $('#ajax-product-modal').modal('show');
          $('#product_id').val(data.id);
          $('#title').val(data.title);
          $('#product_code').val(data.product_code);
          $('#description').val(data.description);
      })
   });

    $('body').on('click', '#delete-product', function () {
 
        var product_id = $(this).data("id");
       
        if(confirm("Are You sure want to delete !")){
          $.ajax({
              type: "get",
              url: SITEURL + "product-list/delete/"+product_id,
              success: function (data) {
              var oTable = $('#laravel_datatable').dataTable(); 
              oTable.fnDraw(false);
              },
              error: function (data) {
                  console.log('Error:', data);
              }
          });
        }
    }); 
  
   });
 
if ($("#productForm").length > 0) {
      $("#productForm").validate({
 
     submitHandler: function(form) {
 
      var actionType = $('#btn-save').val();
      $('#btn-save').html('Sending..');
      
      $.ajax({
          data: $('#productForm').serialize(),
          url: SITEURL + "product-list/store",
          type: "POST",
          dataType: 'json',
          success: function (data) {
 
              $('#productForm').trigger("reset");
              $('#ajax-product-modal').modal('hide');
              $('#btn-save').html('Save Changes');
              var oTable = $('#laravel_datatable').dataTable();
              oTable.fnDraw(false);
              
          },
          error: function (data) {
              console.log('Error:', data);
              $('#btn-save').html('Save Changes');
          }
      });
    }
  })
}
</script>

Start Development Server

We need to start development server. Use the php artisan serve command and start your server :

 php artisan serve
If you want to run the project diffrent port so use this below command
php artisan serve --port=8080

Now we are ready to run our example so run bellow command to quick run.

 http://localhost:8000/product-list

Conclusion

In this laravel datatables ajax crud tutorial , We have successfully create a product list using yajra datatables and also created add, edit, delete functionality without reloading the page.

If you have any questions or thoughts to share, use the comment form below to reach us.

7 Comments

  1. Jeff Jenkins said:

    If you’re using Yajra Datatables, it isn’t “from scratch”

    September 10, 2019
    Reply
  2. sirglio frei said:

    I think this internet site holds some rattling great info for everyone : D.

    October 9, 2019
    Reply
  3. Hameed Hussain said:

    Good Job and Thanks. It is very useful but some task missing. Where did you create the Product migration?

    and also I created everything as you said but when I click the save button, no response. When I check in the console I have error message like below
    cacheURL: “http://127.0.0.1:8000product-list/store”

    Please help me

    Thank you

    November 11, 2019
    Reply
    • w3path said:

      Hi Hussain,

      I have add missing things, thanks to pointing me there.

      About the error, The information you provide is not sufficient to find the issue but you can check the status code.

      If it is 500 then check the Apache error log. It will give you complete information about the issue

      If it is not 500 then check Laravel error log for the error.

      Thanks

      November 14, 2019
      Reply
  4. mark said:

    I have some errors, can you upload the code to github?

    November 24, 2019
    Reply
  5. mark said:

    solved the code you need a / in the routes of js
    url: SITEURL + “/product-list/store”,

    and the $ fillable fields need to be added to the Product model

    November 24, 2019
    Reply
  6. Roy said:

    This is what I have done so far to get things somewhat working. Modified the SITEURL:
    var SITEURL = ‘{{URL::to(”) }}’ + ‘/’;

    Added the protected fillable fields in the model which lets me add records…..
    but I can not get the action buttons to work, anyone have an idea

    January 2, 2020
    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *