How to use Yajra Datatables In Laravel 9?

Today Now in this post i will show you how to use Yajra Datatables in laravel 9 application. Here we will learn laravel 9 yajra datatables . If we want to know about how we can use yajra datatables in laravel 9 then i hope you are in the right place. Here i will help you and give an example of laravel 9 datatables example.

We know that Yajra Datatables provides us with the quick search, pagination, ordering, sorting and etc functionality . Datatables is a basically jQuery plugins and that is allow us to add the advanced interaction controls to our HTML tables data. Datatables is also provide us the ajax for data searching and getting. Here i will give a very quick layout for the search and also sorting by using Datatables. We can also implement the Datatables in our laravel application.

Now in In this example, i will use the default “users” table and also add some dummy users to it using tinker, then i will simply list all users by using yajra datatables.

So let’s start and follow the below step and then make it done.

Step 1: Install Laravel 9

This is first step but this step is optional; however, if you do not have then need to created the laravel app. then you may go ahead and then execute the below command:

composer create-project laravel/laravel example-app
Step 2: Install Yajra Datatable

Now in this step i have to install the yajra datatable by using the Composer package manager, so need to open our terminal and then fire the bellow command:

composer require yajra/laravel-datatables-oracle
Step 3: Add Dummy Users

Then in this step, i have to create the some dummy users by using the tinker factory. So let’s create the dummy records by using bellow command:

php artisan tinker
User::factory()->count(20)->create()
Step 4: Create Controller

Now in this point, i need to create a new controller as name UserController. On this controller i will manage the layout and then getting data as request and also return response, So put the bellow content in controller file:

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');
    }
}
Step 5: Add Route

Then now in this is step i have to create the route for datatables layout file and then the another one for getting data. So need to open our “routes/web.php” file and then add the following route.

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');
Step 6: Create Blade File

That’s good now we are in the last step, let’s i have to create the users.blade.php(resources/views/users.blade.php) for the layout and here i will write all the design code here and put in the following code:

resources/views/users.blade.php

<!DOCTYPE html>
<html>
<head>
    <title>Laravel 9 Yajra Datatables Tutorial - codingspoint.com</title>
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.1/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.datatables.net/1.11.4/css/dataTables.bootstrap5.min.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.5.1.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.11.4/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
    <script src="https://cdn.datatables.net/1.11.4/js/dataTables.bootstrap5.min.js"></script>
</head>
<body>
     
<div class="container">
    <h1>Laravel 9 Yajra Datatables Tutorial - codingspoint.com</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>

Read Also: How To Implement Laravel 9 form validation ?

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

close

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 →