Laravel 8 Yajra Datatables Example Tutorial

In this tutorial you will learn about the Laravel 8 Yajra Datatables Example Tutorial and its application with practical example.

In this Laravel 8 Yajra Datatables Example Tutorial, I’ll show you how to install and use yajra DataTables in your laravel 8 application with example. In this tutorial you will learn to integrate yajra DataTables in your laravel 8 application. 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 8 Yajra Datatables Example Tutorial

In this step by step Laravel 8 Yajra Datatables Example Tutorial I will demonstrate you how to install and use yajra DataTables in your laravel 8 application. I will also share example to use yajra DataTables in your laravel 8 application. Please follow the instruction given below:

Step 1: Install Laravel 8

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

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

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

Step 2 : Install Yajra Datatable

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' => [
    ....
    Yajra\DataTables\DataTablesServiceProvider::class,
]
.....

.....

'providers' => [

....

Yajra\DataTables\DataTablesServiceProvider::class,

]

.....

Step 3: Add Dummy Records

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

php artisan tinker
User::factory()->count(20)->create()

1 2	php artisan tinker User::factory()->count(20)->create()

Step 4: Add Route

After this, we need to define routes in “routes/web.php” file. Lets open “routes/web.php” file and add the following routes in it.

routes/web.php

<?php
  
use Illuminate\Support\Facades\Route;  
use App\Http\Controllers\UserController;  
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/  
Route::get('users', [UserController::class, 'index'])->name('users.index');

<?php

use Illuminate\Support\Facades\Route;

use App\Http\Controllers\UserController;

|--------------------------------------------------------------------------

| Web Routes

|--------------------------------------------------------------------------

| Here is where you can register web routes for your application. These

| routes are loaded by the RouteServiceProvider within a group which

| contains the "web" middleware group. Now create something great!

Route::get('users', [UserController::class, 'index'])->name('users.index');

Step 5: Create Controller

Now, lets create a controller named UserController using command given below –

app/Http/Controllers/UserController.php

<?php
  
namespace App\Http\Controllers;
  
use Illuminate\Http\Request;
use App\Models\User;
use DataTables;
  
class UserController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index(Request $request)
    {
        if ($request->ajax()) {
            $data = User::select('*');
            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('users');
    }
}

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\Models\User;

use DataTables;

class UserController extends Controller

{

/**

* Display a listing of the resource.

* @return \Illuminate\Http\Response

public function index(Request $request)

{

if ($request->ajax()) {

$data = User::select('*');

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('users');

}

Step 6: Create View

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>
<head>
    <title>Laravel 8 Datatables Tutorial</title>
    <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">
    <h1>Laravel 8 Datatables Tutorial</h1>
    <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: 'id', name: 'id'},
            {data: 'name', name: 'name'},
            {data: 'email', name: 'email'},
            {data: 'action', name: 'action', orderable: false, searchable: false},
        ]
    });
    
  });
</script>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Laravel 8 Datatables Tutorial</title>

</head>

<body>

<h1>Laravel 8 Datatables Tutorial</h1>

<thead>

<tr>

<th>Email</th>

<th width="100px">Action</th>

</tr>

</thead>

<tbody>

</tbody>

</table>

</div>

</body>

$(function () {

var table = $('.data-table').DataTable({

processing: true,

serverSide: true,

ajax: "{{ route('users.index') }}",

columns: [

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

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

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

{data: 'action', name: 'action', orderable: false, searchable: false},

]

});

</script>

</html>

Run Development Server

Now we are ready to run our example so lets start the development server using following artisan command –

php artisan serve

1	php artisan serve

Now, open the following URL 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 8 Yajra Datatables Example Tutorial