Yajra Datatables in laravel 6 for sorting, searching.

I will teach you laravel 6 data tables tutorial step by step, so you can understand how to use yajra data tables in laravel 6.

Data is complex, and all data is different. Accordingly, DataTables has a wealth of options which can be used to configure how it will obtain the data to display in the table, and how it processes that data.which is uses for searching, pagination and sorting.


Output:


Step 1: Install Laravel Verison 6

In this step, we have set up to fresh laravel 6 application. So run bellow command and get clean fresh laravel 6 application.

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

Step 2: Install Yajra Datatable

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

composer require yajra/laravel-datatables-oracle

Now Open your config/app.php file & Changes on it:

'providers' => [
        Yajra\DataTables\DataTablesServiceProvider::class
]
'aliases' => [
        'DataTables' => Yajra\DataTables\Facades\DataTables::class
]

Step 3: Add Dummy Records

In this step, we will create some dummy users using the tinker factory. so let’s create dummy records using bellow command:

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

If you have enough data to find or searching then you don’t need to apply this step.


Step 4: Create a Route.

In this step, we have to create a route in routes/web.php

Route::get('users.index', 'Admin\UserController@index')->name('users/index');

Step 5: Changes in your Controller

Now open your UserController and put the below changes.

<?php

namespace App\Http\Controllers;
     
use App\User;
use Illuminate\Http\Request;
use DataTables;

class UserController extends Controller{
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('Admin.users.index');
}
}

Step 6: Create a blade file.

Create a blade file and put the below code

<!DOCTYPE html>
<html>
<head>
    <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">
   <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, Open your server and put the below code.

http://localhost:8888/users

About Dhaval Shah

My name is Dhaval Shah. I'm a PHP developer, entrepreneur and CEO of DAG inventions PVT ltd. I live in India and I love to write tutorials and tips that can help other developers. I am a big fan of PHP, Java-script, JQuery, Laravel, WordPress and Bootstrap.
Follow me on Github / Linkedin

2 Comments

Leave a Reply

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

Subscribe To Our Newsletter
Enter your email to receive a weekly round-up of our best posts. Learn more!