Laravel 6 Yajra Datatable Example

Laravel

Teams applying “Laravel 6 Yajra Datatable Example” in a production project can use the product resource to record implementation, review and debugging time, then compare that effort with tests and shipped functionality instead of treating activity as performance by itself.

Before copying the example into a live application, confirm version-specific behaviour with the official Laravel website and test it against the project’s actual database and runtime.

Nov 13, 2019

Hi guys,

In this blog i will learn you how to use datatable in laravel 6 project. Datatable provide searching, ordering and pagination automatically.

it is given a quick response data because it's used ajax and it's layout very nice therefore user often use.

Now, you can create yajra datatable using below step in laravel 6.

Step 1: Install laravel 6 Project

Bellow command used to you can install Laravel 6 project

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

Step 2: configure this database in the .env file.

After you can configure your database in .env file and change the database name, username, password in the .env file.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=Enter_Your_Database_Name(larave6_datatable)
DB_USERNAME=Enter_Your_Database_Username(root)
DB_PASSWORD=Enter_Your_Database_Password(root)

Step 3: Database migration configure .env file after you can run this bellow command to migrate your databse.

php artisan migrate

Step 4: Insert dummy record

Now we will insert dummy record in "users" table using laravel tinker command.

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

Step 5: Install Yajra datatable package

Now, We will install yajra package using below command.

composer require yajra/laravel-datatables-oracle

Step 6: Add providers and aliases

We will add below providers and aliases in the "config/app.php" file.

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

Step 7: Create Controller

Now, you can create controller file using bellow command.

php artisan make:controller DataTableController --resource

Step 8: Add method in controller

Now, you can write this code in controller file.

<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\User;
class DataTableController extends Controller
{
    public function index()
    {
        return view('datatable.list');
    }
    public function get()
    {
        return datatables()->of(User::query())->make(true);
    }
}

Step 9: Add Route

Add route in your route file.

Route::get('datatable', 'DataTableController@index');
Route::get('get', 'DataTableController@get');

Step 10: Create View File

Now, we will Create view file.

resources/views/datatable/list.blade.php

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Laravel Datatable using Yajra Tutorial Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
    <link  href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
    <script>
        $(function() {
            $('#dataTable').DataTable({
                processing: true,
                serverSide: true,
                ajax: '{{ url('get') }}',
                columns: [
                    { data: 'id', name: 'id' },
                    { data: 'name', name: 'name' },
                    { data: 'email', name: 'email' },
                    { data: 'created_at', name: 'created_at' }
                ]
            });
        });
    </script>
</head>
<body>
<div class="container">
    <h2>Laravel Datatable using Yajra Tutorial Example</h2>
    <table class="table table-bordered" id="dataTable">
        <thead>
        <tr>
            <th>Id</th>
            <th>Name</th>
            <th>Email</th>
            <th>Created</th>
        </tr>
        </thead>
    </table>
</div>
</body>
</html>

It will help you ....