Yajra Datatable using LARAVEL 10

Spread the love

Hello Guys,

Let’s explore an article showcasing a practical Yajra Datatable example for Laravel 10. In this guide, I will provide a concise yet comprehensive overview of how to effectively utilize Yajra Datatables in the context of Laravel 10. This article offers a detailed example of using Yajra Datatables in Laravel 10, catering to your server-side needs. We’ll walk through the essential steps required for implementing a Laravel 10 Datatables Ajax example.

Yajra Datatables empowers us with swift access to essential functionalities such as pagination, ordering, sorting, and more. Essentially, Datatables are jQuery plugins designed to enhance the interactivity of HTML tables by adding advanced features. Moreover, Datatables now support Ajax for efficient data retrieval and searching, making it a powerful tool for optimizing user experiences. Leveraging Datatables in your Laravel application can result in a speedy and efficient layout for searching and sorting data.

In this illustrative example, we’ll leverage the default “users” table in Laravel, populate it with fictitious user data using Tinker, and then harness the capabilities of Yajra Datatables to effortlessly list all the users.

Follow the step-by-step guide below to successfully complete this process for Yajra Datatables.

Step 1: Install Laravel 10

While it’s not obligatory, you have the option to proceed and execute the following command if you haven’t yet established your Laravel application:

Even though it’s not mandatory, you can still go ahead and execute the following command if you haven’t created your Laravel app yet:

Also Read: How to Create Custom Helper Functions in LARAVEL 10

composer create-project laravel/laravel example-app

Step 2: Install Yajra Datatable

In this crucial step, we will harness the power of the Composer package manager to effortlessly install Yajra Datatable. To get started, simply access your console and input the following command:

Utilize Composer to easily install Yajra Datatable by entering the following command in your console during this pivotal stage.

composer require yajra/laravel-datatables-oracle

Step 3: Add Dummy Users

To generate dummy user data in this stage using Tinker Factory, you can utilize the following command to create simulated records:

Generate Fake User Records with Tinker Factory

Also Read: How to Add Foreign Key in MIGRATION using Laravel?

php artisan tinker

User::factory()->count(20)->create()

Step 4: Create Controller

At this juncture, it is advisable to create a fresh controller called “UserController.” Incorporate the provided content into the controller file as it will serve as the central component for managing layout, processing incoming data requests, and delivering responses.

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

In this phase, it is essential to create a route for the Datatables layout file and another for data retrieval. To accomplish this, follow these steps:

  1. Open your “routes/web.php” file.
  2. Insert the following route:
routes/web.php

Also Read: How to Rollback Migration in Laravel?

<?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

During the final phase, we will create the users.blade.php file, located in the resources/views directory. Within this file, we will craft the design elements and incorporate the necessary code:

resources/views/users.blade.php

Also Read: How to Drop Soft Delete from Table using Migration in LARAVEL?

<!DOCTYPE html>
<html>
<head>
    <title>Laravel 10 Yajra Datatables Tutorial - itcodestuff.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 10 Yajra Datatables Tutorial - itcodestuff.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>

Run Laravel App:

Once you’ve successfully followed all the essential procedures, it’s time to initiate the Laravel application by executing the provided command below and then hitting the Enter key:

php artisan serve

To access the app’s results, simply input the supplied URL into your internet browser.

Also Read: How to use laravel cookies – Get, Set, Delete with example

http://localhost:8000/users

Your quest for the best Laravel blog ends here, where expert knowledge meets curated excellence.

Leave a Comment