Laravel 5.8 Ajax CRUD tutorial using Datatable JS

Laravel 5.8 Ajax CRUD tutorial using Datatable JS

In this post we will give you information about Laravel 5.8 Ajax CRUD tutorial using Datatable JS. Hear we will give you detail about Laravel 5.8 Ajax CRUD tutorial using Datatable JSAnd how to use it also give you demo for it if it is necessary.

In this tutorial, i want to share with you create jquery ajax crud operations application using datatable js, modals in laravel 5.8. we will create insert update delete records with modal and pagination in laravel 5.8.

We will use yajra datatable to list a records with pagination, sorting and filter (search). we will use bootstrap modal for create new records and update new records. we will use resource routes to create crud (create read update delete) application in laravel 5.8.

I will provide you step by step guide to create ajax crud example with laravel 5.8. you just need to follow few step to get c.r.u.d with modals and ajax. you can easily use with your laravel 5.8 project and easy to customize it.

You can see bellow preview of ajax crud app.

List Page

Create Page

Edit Page

Step 1 : Install Laravel 5.8

first of all we need to get fresh Laravel 5.8 version application using bellow command, So open your terminal OR command prompt and run bellow command:

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

Step 2 : Install Yajra Datatable Package

We need to install yajra datatable composer package for datatable, so you can install using following command:

composer require yajra/laravel-datatables-oracle

After that you need to set providers and alias.

config/app.php

.....

'providers' => [

....

YajraDataTablesDataTablesServiceProvider::class,

]

'aliases' => [

....

'DataTables' => YajraDataTablesFacadesDataTables::class,

]

.....

Also see:Laravel – Confirmation Before Delete Record from Database Example

Step 3: Update Database Configuration

In second step, we will make database configuration for example database name, username, password etc for our crud application of laravel 5.8. So let’s open .env file and fill all details like as bellow:

.env

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=here your database name(blog)

DB_USERNAME=here database username(root)

DB_PASSWORD=here database password(root)

Step 4: Create Table

we are going to create ajax crud application for product. so we have to create migration for “products” table using Laravel 5.8 php artisan command, so first fire bellow command:

php artisan make:migration create_products_table --create=products

After this command you will find one file in following path “database/migrations” and you have to put bellow code in your migration file for create products table.

<?php

use IlluminateSupportFacadesSchema;

use IlluminateDatabaseSchemaBlueprint;

use IlluminateDatabaseMigrationsMigration;

class CreateProductsTable extends Migration

{

/**

* Run the migrations.

*

* @return void

*/

public function up()

{

Schema::create('products', function (Blueprint $table) {

$table->increments('id');

$table->string('name');

$table->text('detail');

$table->timestamps();

});

}

/**

* Reverse the migrations.

*

* @return void

*/

public function down()

{

Schema::dropIfExists('products');

}

}

Now you have to run this migration by following command:

php artisan migrate

Step 5: Create Resource Route

Here, we need to add resource route for product ajax crud application. so open your “routes/web.php” file and add following route.

routes/web.php

Route::resource('ajaxproducts','ProductAjaxController');

Step 6: Create Controller and Model

In this step, now we should create new controller as ProductAjaxController. So run bellow command and create new controller.

So, let’s copy bellow code and put on ProductAjaxController.php file.

app/Http/Controllers/ProductAjaxController.php

<?php

namespace AppHttpControllers;

use AppProduct;

use IlluminateHttpRequest;

use DataTables;

class ProductAjaxController extends Controller

{

/**

* Display a listing of the resource.

*

* @return IlluminateHttpResponse

*/

public function index(Request $request)

{

if ($request->ajax()) {

$data = Product::latest()->get();

return Datatables::of($data)

->addIndexColumn()

->addColumn('action', function($row){

$btn = '<a href="javascript:void(0)" data-toggle="tooltip" data-id="'.$row->id.'" data-original-title="Edit" >Edit</a>';

$btn = $btn.' <a href="javascript:void(0)" data-toggle="tooltip" data-id="'.$row->id.'" data-original-title="Delete" >Delete</a>';

return $btn;

})

->rawColumns(['action'])

->make(true);

}

return view('productAjax',compact('products'));

}

/**

* Store a newly created resource in storage.

*

* @param IlluminateHttpRequest $request

* @return IlluminateHttpResponse

*/

public function store(Request $request)

{

Product::updateOrCreate(['id' => $request->product_id],

['name' => $request->name, 'detail' => $request->detail]);

return response()->json(['success'=>'Product saved successfully.']);

}

/**

* Show the form for editing the specified resource.

*

* @param AppProduct $product

* @return IlluminateHttpResponse

*/

public function edit($id)

{

$product = Product::find($id);

return response()->json($product);

}

/**

* Remove the specified resource from storage.

*

* @param AppProduct $product

* @return IlluminateHttpResponse

*/

public function destroy($id)

{

Product::find($id)->delete();

return response()->json(['success'=>'Product deleted successfully.']);

}

}


Ok, so after run bellow command you will find “app/Product.php” and put bellow content in Product.php file:

app/Product.php

<?php

namespace App;

use IlluminateDatabaseEloquentModel;

class Product extends Model

{

protected $fillable = [

'name', 'detail'

];

}

Step 7: Create Blade Files

In last step. In this step we have to create just blade file. so we need to create only one blade file as productAjax.blade.php file.

So let’s just create following file and put bellow code.

resources/views/productAjax.blade.php

<!DOCTYPE html>

<html>

<head>

<title>Laravel 5.8 Ajax CRUD tutorial using Datatable - ItSolutionStuff.com</title>

<meta name="csrf-token" content="{{ csrf_token() }}">

<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">

<link href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.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>

<script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>

</head>

<body>

<div >

<h1>Laravel 5.8 Ajax CRUD tutorial using Datatable - ItSolutionStuff.com</h1>

<a href="javascript:void(0)" id="createNewProduct"> Create New Product</a>

<table >

<thead>

<tr>

<th>No</th>

<th>Name</th>

<th>Details</th>

<th width="280px">Action</th>

</tr>

</thead>

<tbody>

</tbody>

</table>

</div>

<div id="ajaxModel" aria-hidden="true">

<div >

<div >

<div >

<h4 id="modelHeading"></h4>

</div>

<div >

<form id="productForm" name="productForm" >

<input type="hidden" name="product_id" id="product_id">

<div >

<label for="name" >Name</label>

<div >

<input type="text" id="name" name="name" placeholder="Enter Name" value="" maxlength="50" required="">

</div>

</div>

<div >

<label >Details</label>

<div >

<textarea id="detail" name="detail" required="" placeholder="Enter Details" ></textarea>

</div>

</div>

<div >

<button type="submit" id="saveBtn" value="create">Save changes

</button>

</div>

</form>

</div>

</div>

</div>

</div>

</body>

<script type="text/javascript">

$(function () {

$.ajaxSetup({

headers: {

'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')

}

});

var table = $('.data-table').DataTable({

processing: true,

serverSide: true,

ajax: "{{ route('ajaxproducts.index') }}",

columns: [

{data: 'DT_RowIndex', name: 'DT_RowIndex'},

{data: 'name', name: 'name'},

{data: 'detail', name: 'detail'},

{data: 'action', name: 'action', orderable: false, searchable: false},

]

});

$('#createNewProduct').click(function () {

$('#saveBtn').val("create-product");

$('#product_id').val('');

$('#productForm').trigger("reset");

$('#modelHeading').html("Create New Product");

$('#ajaxModel').modal('show');

});

$('body').on('click', '.editProduct', function () {

var product_id = $(this).data('id');

$.get("{{ route('ajaxproducts.index') }}" +'/' + product_id +'/edit', function (data) {

$('#modelHeading').html("Edit Product");

$('#saveBtn').val("edit-user");

$('#ajaxModel').modal('show');

$('#product_id').val(data.id);

$('#name').val(data.name);

$('#detail').val(data.detail);

})

});

$('#saveBtn').click(function (e) {

e.preventDefault();

$(this).html('Sending..');

$.ajax({

data: $('#productForm').serialize(),

url: "{{ route('ajaxproducts.store') }}",

type: "POST",

dataType: 'json',

success: function (data) {

$('#productForm').trigger("reset");

$('#ajaxModel').modal('hide');

table.draw();

},

error: function (data) {

console.log('Error:', data);

$('#saveBtn').html('Save Changes');

}

});

});

$('body').on('click', '.deleteProduct', function () {

var product_id = $(this).data("id");

confirm("Are You sure want to delete !");

$.ajax({

type: "DELETE",

url: "{{ route('ajaxproducts.store') }}"+'/'+product_id,

success: function (data) {

table.draw();

},

error: function (data) {

console.log('Error:', data);

}

});

});

});

</script>

</html>

Now you can test it by using following command:

php artisan serve

Now you can open bellow URL on your browser:

Also see:Build Admin Panel with Laravel 5.8

http://localhost:8000/ajaxproducts

I hope it can help you….

Hope this code and post will helped you for implement Laravel 5.8 Ajax CRUD tutorial using Datatable JS. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs

For More Info See :: laravel And github

Leave a Comment

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

85  +    =  89

We're accepting well-written guest posts and this is a great opportunity to collaborate : Contact US