Laravel 8 Yajra Datatable Example

Share Me
  •  
  •  
  •  
  • 1
  •  
  •  
  •  
  •  
  •  
  •  
  •  
    1
    Share
Laravel 8 Yajra Datatable

Hello Dev’s
Today now in this article i will teach you how to use data table in laravel 8 project. Data table will provide searching, ordering and pagination automatically. Here we know Laravel 8 Yajra Datatable example.

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

Now, we can create yajra datatable by using below step in laravel 8.

Step 1: Install laravel 8 Project

By using bellow command used to we can install new Laravel 8 project

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

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

After that we can configure our 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

Affterconfigure .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 by using laravel tinker command.

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

Step 5: Install Yajra datatable package

Now, We will install new yajra package by 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, we can create a controller file by using bellow command.

php artisan make:controller DataTableController --resource

Step 8: Add method in controller

Now, we can write this code in controller file.

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\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>

Read Also : How To disable button on click to prevent multiple form submits in jQuery?

Thanks for read. I hope it help you. For more you can follow us on facebook.

About Shahriar Sagor

My name is Shahriar sagor. I'm a developer. I live in Bangladesh and I love to write tutorials and tips that will help to other Developer's. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.

View all posts by Shahriar Sagor →