Laravel 11 Install Yajra Datatable Example

Websolutionstuff | Apr-10-2024 | Categories : Laravel

In this tutorial, we'll explore an example of installing Yajra Datatable in Laravel 11. In every project, it's essential to display records with a visually appealing UI, and we often need features like easy searching, sorting, and pagination. Yajra Datatable helps us achieve this easily.

So, in this guide, I'll show you how to easily install Yajra Datatable in Laravel 11. we'll use yajra/laravel-datatables composer package.

Table of Contents:

Step 1: Install Laravel 11

Step 2: Install Yajra Datatables

Step 3: Add Dummy Users

Step 4: Create Controller

Step 5: Create Route

Step 6: Create Blade File

Step 7: Run the Laravel App

 

Step 1: Install Laravel 11

In this step, we'll install the laravel 11 application using the following command.

composer create-project laravel/laravel laravel-11-example

 

Step 2: Install Yajra Datatables

Then, we'll install yajra/datatable composer package using the following command.

composer require yajra/laravel-datatables

 

 

Step 3: Add Dummy Users

Now, we'll create some dummy records using the tinker. So, run the following command.

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

 

Step 4: Create Controller

Then, we'll create a UserController.php file. In this file, we'll define the function and add the datatable.

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.
     * Yajra Datatable Laravel 11 - techsolutionstuff
     *
     * @return \Illuminate\Http\Response
     */
    public function index(Request $request)
    {
        if ($request->ajax()) {

            $data = User::query();

            return Datatables::of($data)
                    ->addIndexColumn()
                    ->addColumn('action', function($row){
       
                            $btn = '<a href="javascript:void(0)" data-id="'.$row->id.'" class="edit btn btn-primary btn-sm">View</a>';
                            $btn .= '<a href="javascript:void(0)" data-id="'.$row->id.'" class="delete btn btn-danger btn-sm">Delete</a>';
      
                            return $btn;
                    })
                    ->rawColumns(['action'])
                    ->make(true);
        }
          
        return view('users');
    }
}
 
Step 5: Create Route

Now, define the routes into the web.php file. So, add the following code snippets.

routes/web.php

<?php
  
use Illuminate\Support\Facades\Route;
  
use App\Http\Controllers\UserController;
    
Route::get('users', [UserController::class, 'index'])->name('users.index');

 

 

Step 6: Create Blade File

Then, we'll create a users.blade.php file to display yajra datatable.

resources/views/users.blade.php

<!DOCTYPE html>
<html>
<head>
    <title>Laravel 11 Install Yajra Datatable Example - Websolutionstuff</title>
    <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://cdn.datatables.net/1.11.4/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.11.4/js/dataTables.bootstrap5.min.js"></script>
</head>
<body>
       
<div class="container">
    <div class="card mt-5">
        <h3 class="card-header p-3">Laravel 11 Install Yajra Datatable Example - Websolutionstuff</h3>
        <div class="card-body">
            <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>
    </div>
</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>
 
Step 7: Run the Laravel App

Now, run the laravel 11 application using the following command.

php artisan serve

 


You might also like:

Recommended Post
Featured Post
How to File Upload in Angular 17 Tutorial
How to File Upload in Angular...

In this article, we'll see how to file upload in the angular 17 tutorial. Here, we'll learn about file uplo...

Read More

Apr-03-2024

How To Use OpenAI In Laravel 8/9
How To Use OpenAI In Laravel 8...

In this article, we will explore the integration of OpenAI into Laravel versions 8, 9, and 10. Our focus will be on unde...

Read More

Feb-06-2023

How To Create Pie Chart In Laravel 9 Using Highcharts
How To Create Pie Chart In Lar...

In this article, we will see how to create a pie chart in laravel 9 using highcharts. A pie chart is a circular statisti...

Read More

Oct-05-2022

How to Integrate Cashfree Payment Gateway in Laravel 10
How to Integrate Cashfree Paym...

Hello developers! Today, we're about to embark on a journey to elevate our Laravel applications by integrating...

Read More

Feb-12-2024