Laravel 7/6 Yajra DataTables Example Tutorial

In this tutorial you will learn about the Laravel 7/6 Yajra DataTables Example Tutorial and its application with practical example.

In this Laravel 7, 6 Yajra DataTables Example tutorial, I’ll show you how to install and use yajra DataTables in your laravel projects with example. In this tutorial, we will be using yajra datatable package for listing of records with pagination, sorting and filter (search) feature. Laravel Yajra datatables package comes with many built-in features for searching and sorting functionality.

Table Of Contents−

Laravel 7/6 Yajra DataTables Example Tutorial
Install Laravel 7/6

.env file
- Run Migration
- Add Fake Records
  - Add Route
  - Create Controller
- Create Blade / View Files
  - Start Development Server

In this step by step tutorial I’ll guide you through the steps to install and use yajra DataTables with your laravel project:

Install Laravel
Configuration .env file
Run Migration

Install Yajra DataTables
Add Fake Data
Create Route, Controller & Blade View

Start Development Server

Install Laravel 7/6

First of all we need to create a fresh laravel project, download and install Laravel 7/6 using the below command

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

1	composer create-project --prefer-dist laravel/laravel larablog

Configure Database In .env file

Now, lets create a MySQL database and connect it with laravel application. After creating database we need to set database credential in application’s .env file.

.env

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=larablog
DB_USERNAME=root
DB_PASSWORD=

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=larablog

DB_USERNAME=root

DB_PASSWORD=

Run Migration

Now, we need to create migration of tables using following command:

php artisan migrate

1	php artisan migrate

Install Yajra Datatable Package

In this step, we will install Yajra Datatables Package via the composer dependency manager. Use the following command to install Yajra Datatables Package.

composer require yajra/laravel-datatables-oracle

1	composer require yajra/laravel-datatables-oracle

After Installing Yajra Datatables package, we need to add service provider and alias in config/app.php file as following.

config/app.php

'providers' => [
      // Other service providers…
  Yajra\DataTables\DataTablesServiceProvider::class,
 ],

'aliases' => [
 // Other aliases…
 'Datatables' => Yajra\Datatables\Facades\Datatables::class,
 ],

'providers' => [

// Other service providers…

Yajra\DataTables\DataTablesServiceProvider::class,

'aliases' => [

// Other aliases…

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

After set providers and aliases then publish vendor run by the following command.

php artisan vendor:publish

1	php artisan vendor:publish

Add Fake Records

Now, we need to add some fake records in the database.

php artisan tinker

1	php artisan tinker

Running this command will add some fake records in your database table.

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

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

Add Route

Now add routes in web.php file as following:

routes/web.php

Route::get('users', 'UsersController@index');
<strong></strong>Route::get('users-list', 'UsersController@usersList');

1 2	Route::get('users', 'UsersController@index'); <strong></strong>Route::get('users-list', 'UsersController@usersList');

Create Controller

Now, create a new controller UsersController using following artisan command:

php artisan make:controller UsersController

1	php artisan make:controller UsersController

Once the above command executed, it will create a controller file UsersController.php in app/Http/Controllers/directory. Open the UsersController.php file and put the following code in it.

app/Http/Controllers/UsersController.php

<?php
 
namespace App\Http\Controllers;
 
use Illuminate\Http\Request;
use Redirect,Response,DB,Config;
use Datatables;
class UsersController extends Controller
{
    public function index()
    {
        return view('users');
    }
    public function usersList()
    {
        $users = DB::table('users')->select('*');
        return datatables()->of($users)
            ->make(true);
    }
}

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use Redirect,Response,DB,Config;

use Datatables;

class UsersController extends Controller

{

public function index()

{

return view('users');

}

public function usersList()

{

$users = DB::table('users')->select('*');

return datatables()->of($users)

->make(true);

}

Create Blade / View Files

In this step, we will create view/blade file. Lets create a blade file “users.blade.php” in “resources/views/” directory and put the following code in it respectively.

resources/views/users.blade.php

<!DOCTYPE html>
 
<html lang="en">
<head>
<title>Laravel DataTable - Tuts Make</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">  
<link  href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>  
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
</head>
      <body>
         <div class="container">
               <h2>Laravel DataTable - Tuts Make</h2>
            <table class="table table-bordered" id="laravel_datatable">
               <thead>
                  <tr>
                     <th>Id</th>
                     <th>Name</th>
                     <th>Email</th>
                     <th>Created at</th>
                  </tr>
               </thead>
            </table>
         </div>
   <script>
   $(document).ready( function () {
    $('#laravel_datatable').DataTable({
           processing: true,
           serverSide: true,
           ajax: "{{ url('users-list') }}",
           columns: [
                    { data: 'id', name: 'id' },
                    { data: 'name', name: 'name' },
                    { data: 'email', name: 'email' },
                    { data: 'created_at', name: 'created_at' }
                 ]
        });
     });
  </script>
   </body>
</html>

<!DOCTYPE html>

<head>

<title>Laravel DataTable - Tuts Make</title>

</head>

<body>

<h2>Laravel DataTable - Tuts Make</h2>

<thead>

<tr>

<th>Email</th>

<th>Created at</th>

</tr>

</thead>

</table>

</div>

$(document).ready( function () {

$('#laravel_datatable').DataTable({

processing: true,

serverSide: true,

ajax: "{{ url('users-list') }}",

columns: [

{ data: 'id', name: 'id' },

{ data: 'name', name: 'name' },

{ data: 'email', name: 'email' },

{ data: 'created_at', name: 'created_at' }

]

});

</script>

</body>

</html>

Start Development Server

Let’s start the development server using following artisan command:

php artisan serve

1	php artisan serve

Now, visit the following link in browser to see the output:

http://localhost:8000/users

1	http://localhost:8000/users

AngularJS

CodeIgniter

Laravel

Node Js

Wordpress

More Blog

Learn

ABOUT PAGES

Laravel 7/6 Yajra DataTables Example Tutorial