How To Install Yajra Datatable In Laravel 9


In this article, we will see how to install yajra datatable in laravel 9. As we all used datatable on our backend side project, here we will show you the laravel 9 datatable examples or how to use datatable in laravel 9.

Yajra datatable in laravel 9 is easy to install and it is a famous package in laravel as well as in PHP. Yajra datatable is basically a jQuery plugin that allows you to add advanced interaction controls to your HTML tables data. Datatables also provide ajax for data searching and getting and also provide pagination, sorting, etc.

So, let's see yajra datatable in laravel 9 and laravel 9 yajra datatable example.

Step 1: Create New Project In Laravel 9

Step 2: Install the Yajra Datatable Package

Step 3: Create Dummy Records Using Tinker

Step 4: Add New Route

Step 5: Create UserController For Datatable

Step 6: Create Blade File

 

Step 1: Create New Project In Laravel 9

Now, we will create a new project set up for this Laravel 9 Yajra Datatable Example.

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

 

Step 2: Install the Yajra Datatable Package

In this step, we will run the following command in our project to get the latest version of the datatable package.

composer require yajra/laravel-datatables-oracle

After that, we need to add providers and alias in your project's config/app.php file

'providers' => [
    ...,
    Yajra\DataTables\DataTablesServiceProvider::class,
]

'aliases' => [
    ...,
    'DataTables' => Yajra\DataTables\Facades\DataTables::class,
]

 

 

Step 3: Create Dummy Records Using Tinker

After adding aliases and providers are adding some dummy records in the database using the below command.

php artisan tinker

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

 

Step 4: Add New Route

Now, we will create a route in web.php

routes/web.php

Route::get('users', ['uses'=>'App\Http\Controllers\UserController@index', 'as'=>'users.index']);

 

Step 5: Create UserController For Datatable

After adding the route we need to create a controller to manage the layout and get data requests and return responses. Using the below command to create a controller

php artisan make:controller UserController

app/Http/Controllers/UserController.php

<?php
     
namespace App\Http\Controllers;
     
use Illuminate\Http\Request;
use App\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::latest()->get();
            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 Blade File

Now create a users.blade.php file for view.

resources/views/users.blade.php

<!DOCTYPE html>
<html>
<head>
    <title>How To Install Yajra Datatable In Laravel 9 - Techsolutionstuff</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 9 Yajra Datatable Example</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: 'DT_RowIndex', name: 'DT_RowIndex'},
            {data: 'name', name: 'name'},
            {data: 'email', name: 'email'},
            {data: 'action', name: 'action', orderable: false, searchable: false},
        ]
    });
    
  });
</script>
</html>

 


You might also like:

RECOMMENDED POSTS

FEATURE POSTS