Laravel 8 DataTables | Install and Use Yajra Datatables Laravel 8

Laravel 8 Yajra DataTables. In this post, i will share with you how to install and use yajra DataTables in laravel 8.

Yajra DataTables provides package for laravel. Which is used to searching, sorting, pagination on the table and display lists. And you can install it by this command composer require yajra/laravel-datatables-oracle in laravel app.

Laravel 8 DataTables Example

  • Step 1 – Installing Laravel 8 App
  • Step 2 – Configuring .evn file for Database
  • Step 3 – Installing Laravel Yajra DataTables
  • Step 4 – Run Migration
  • Step 5 – Add Dummy Record
  • Step 6 – Create Route,
  • Step 7 – Creating Datatables Controller
  • Step 8 – Create DataTable Blade View
  • Step 9 – Start Development Server

Step 1 – Installing Laravel 8 App

In step 1, open your terminal and navigate to your local web server directory using the following command:

//for windows user
cd xampp/htdocs

//for ubuntu user
cd var/www/html

Then install laravel 8 latest application using the following command:

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

Step 2 – Configuring .evn file for Database

In step 2, open your downloaded laravel 8 app into any text editor. Then find .env file and configure database detail like following:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=db name
DB_USERNAME=db user name
DB_PASSWORD=db password

Step 3 – Installing Laravel Yajra DataTables

In step 3, Navigate to your downloaded LaravelDataTables directory. And then install Yajra Datatables Packages in your laravel 8. Open terminal and run the following command:

cd / LaravelDataTables

composer require yajra/laravel-datatables-oracle
config/app.php

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

 'aliases' => [

  'Datatables' => Yajra\Datatables\Facades\Datatables::class,
] 

Then publish laravel datatables vendor package by using the following command:

php artisan vendor:publish

Step 4 – Run Migration

Now, open again your terminal and type the following command on cmd to create tables into your selected database:

php artisan migrate

Step 5 – Add Dummy Record

In step 5, Navigate to database/seeders/ directory and add the following code into it for add fake records into database table users:

<?php

namespace Database\Seeders;

use Illuminate\Database\Seeder;

use App\Models\User;

class DatabaseSeeder extends Seeder
{
    /**
     * Seed the application's database.
     *
     * @return void
     */
    public function run()
    {
         User::factory(200)->create();
    }
}

Then use the following command to seeds db:

php artisan db:seed

Then will see this “Database seeding completed successfully.” on command prompt.

Step 6 – Create Route

In step 6, open your web.php file, which is located inside routes directory. Then add the following routes into web.php file:

use App\Http\Controllers\DataTablesController;

Route::get('yajra-datatables', [DataTablesController::class, 'index']);

Step 7 – Creating Datatables Controller

In step 7, create datatable controller by using the following command:

php artisan make:controller DataTablesController

The above command will create DataTablesController.php file, which is located inside LaravelDataTables/app/Http/Controllers/ directory. So add the following code into it:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\Models\User;

use Datatables;

class DataTablesController extends Controller
{
    public function index(){
    	
    	if(request()->ajax()) {
            return datatables()->of(User::select('*'))
            ->addIndexColumn()
            ->make(true);
        }
        return view('datatables');
    }
}

Step 8 – Create DataTable Blade View

In step 8, create new blade view file that named datatables.blade.php inside resources/views directory for display list using yajra datatables in laravel.

And add the following jQuery yajra datatbles libraries into datatables.blade.php:

  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

  <link  href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css" rel="stylesheet">

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

Also add the following jQuery and ajax code into datatables.blade.php to get data from database table with pagination:

<script type="text/javascript">
     
 $(document).ready( function () {
    $('#datatables-example').DataTable({
           processing: true,
           serverSide: true,
           ajax: "{{ url('yajra-datatables') }}",
           columns: [
                    { data: 'id', name: 'id' },
                    { data: 'name', name: 'name' },
                    { data: 'email', name: 'email' },
                    { data: 'created_at', name: 'created_at' }
                 ]
       });
    });
</script>

Don’t worry i have already added the jquery datatables libraries and ajax code on datatables.blade.php.

So, add the following code into datatables.blade.php file:

<!DOCTYPE html>
<html>
<head>
  <title>Laravel 8 DataTables Example</title>

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

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

  <link  href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css" rel="stylesheet">

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

</head>
<body>

<div class="container mt-4">

  <div class="card">

    <div class="card-header text-center font-weight-bold">
      <h2>Laravel 8 DataTables Example Tutorial</h2>
    </div>

    <div class="card-body">

        <table class="table table-bordered" id="datatables-example">
           <thead>
              <tr>
                 <th>Id</th>
                 <th>Name</th>
                 <th>Email</th>
                 <th>Created at</th>
              </tr>
           </thead>
        </table>

    </div>

  </div>
<script type="text/javascript">
     
 $(document).ready( function () {
    $('#datatables-example').DataTable({
           processing: true,
           serverSide: true,
           ajax: "{{ url('yajra-datatables') }}",
           columns: [
                    { data: 'id', name: 'id' },
                    { data: 'name', name: 'name' },
                    { data: 'email', name: 'email' },
                    { data: 'created_at', name: 'created_at' }
                 ]
       });
    });
</script>
</div>  
</body>
</html>

Step 9 – Start Development Server

In step 9, open your browser and fire the following url into your browser:

http://127.0.0.1:8000/yajra-datatables

Laravel 8 yajra datatables app will look like in the following image:

One Comment

  1. Jhon Fabio Cardona Martinez said:

    Nice example, I’m going to explain how I’m doing.

    November 12, 2021
    Reply

Leave a Reply

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