Laravel Datatables Example

Websolutionstuff | May-16-2020 | Categories : Laravel PHP jQuery

In this example, I will show you how to implement/install data tables in laravel. Datatables provides users with many functionalities like search buttons, custom buttons, responsive table, search records, filter data, pagination, etc, yajra datatable is one of the famous packages in laravel and PHP.

So, let's see laravel 6/7 datatables example, how to install datatables in laravel 6, the example of datatable in laravel 6/7, use datatables in laravel 7, yajra datatables laravel 6 crud example, laravel datatables server-side, laravel datatables AJAX

Datatables are basically jQuery plugins that allow you to add advanced interaction controls to your HTML tables data. Datatables also provide ajax for data searching and getting.

Step 1: Create new project in laravel 6/7

We are creating a new project set up for this example, So create a new project using the below command.

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

Read Also: Laravel AJAX CRUD Example

Step 2 : Install Yajra Datatable Package

Run the following command in your project to get the latest version of the datatable package.

composer require yajra/laravel-datatables-oracle

After that, you need to add providers and alias in your project's config/app.php file

'providers' => [
    ...,
    Yajra\DataTables\DataTablesServiceProvider::class,
]

'aliases' => [
    ...,
    'DataTables' => Yajra\DataTables\Facades\DataTables::class,
]

Step 3: Create Some Dummy Records Using Tinker

After adding aliases and providers are adding some dummy records in databse using the below command.

php artisan tinker

factory(App\User::class, 200)->create();

Read Also: Laravel 8 Create Custom Helper Function Example

Step 4: Create New Route

Now in this step, we are creating a new route for datatable example in this path Routes/web.php

Route::get('users', ['uses'=>'UserController@index', 'as'=>'users.index']);

Step 5: Create Controller For Datatable

After adding the route we need to create a controller to manage the layout and get data requests and return responses, follow below command for creating controller

php artisan make:controller UserController

After this, we need to add the below code in this path app/Http/Controllers/UserController.php

<?php
     
namespace App\Http\Controllers;
     
use Illuminate\Http\Request;
use App\User;
use DataTables;
     
class UserController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index(Request $request)
    {
        if ($request->ajax()) {
            $data = User::latest()->get();
            return Datatables::of($data)
                    ->addIndexColumn()
                    ->addColumn('action', function($row){
   
                           $btn = '<a href="javascript:void(0)" class="edit btn btn-primary btn-sm">View</a>';
     
                            return $btn;
                    })
                    ->rawColumns(['action'])
                    ->make(true);
        }
      
        return view('users');
    }
}

Read Also: How to Use JSON Data Field in MySQL Database

Step 6: Create Blade File

Now create the users.blade.php file for view in this path resources/views/users.blade.php

<!DOCTYPE html>
<html>
<head>
    <title>Laravel Datatables Example - websolutionstuff.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 class="container">
    <h1>Laravel Datatables Example </h1>
    <table class="table table-bordered data-table">
        <thead>
            <tr>
                <th>No</th>
                <th>Name</th>
                <th>Email</th>
                <th width="100px">Action</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</div>
   
</body>
   
<script type="text/javascript">
  $(function () {
    
    var table = $('.data-table').DataTable({
        processing: true,
        serverSide: true,
        ajax: "{{ route('users.index') }}",
        columns: [
            {data: 'DT_RowIndex', name: 'DT_RowIndex'},
            {data: 'name', name: 'name'},
            {data: 'email', name: 'email'},
            {data: 'action', name: 'action', orderable: false, searchable: false},
        ]
    });
    
  });
</script>
</html>

Now, We are all completed our code, so it's time to run this project...

So, copy the below command and run it in the terminal.