Laravel 9 Yajra Datatable Example

Websolutionstuff | Mar-10-2022 | Categories : Laravel

In this artical we will see laravel 9 yajra datatable example. As we all used datatable on our backend side project, Here I will show you laravel 9 datatable example or how to install datatable in laravel 9.

Yajra datatable in laravel 9 is very easy to install and it is a famous package in laravel as well as in php. Yajra datatable is basically jQuery plugins that allow you to add advanced interaction controls to your HTML tables data. Datatables also provide ajax for data searching and getting.

 

Step 1: Create New Project for Laravel 9 Yajra Datatable Example

Step 2: Install Yajra Datatable Package for Laravel 9 Datatable Example

Step 3: Create Dummy Records Using Tinker

Step 4: Add New Route

Step 5: Create UserController For Datatable

Step 6: Create Blade File for Yajra Datatable Example in Laravel 9

 

 

Step 1: Create New Project for Laravel 9 Yajra Datatable Example

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 Yajra Datatable Package for Laravel 9 Datatable Example

In a second 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 database using the below command.

php artisan tinker

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

 

Step 4: Add New Route

Now in this 4th step, we will create a route for Yajra Datatable Example in Laravel 9 in this path 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 layout and get data request and return response, follow the below command to create controller

php artisan make:controller UserController

 

Now, add the below code in this file location 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 users.blade.php file for view in this path resources/views/users.blade.php

<!DOCTYPE html>
<html>
<head>
    <title>Laravel 9 Yajra Datatable Example - websolutionstuff.com</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 Post
Featured Post
Datatables Expand/Collapse Columns
Datatables Expand/Collapse Col...

In this article, we will see how to expand/collapse columns in datatable. The Datatables API has a number of method...

Read More

Jun-05-2022

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 Get Current Date And Time In Node.js
How To Get Current Date And Ti...

In this example we will see how to get current date and time in Node.js application. In Node.js date and time are handle...

Read More

Sep-01-2021

How To Create List And Grid View Using JavaScript
How To Create List And Grid Vi...

In this article, we will see how to create a list and grid view using javascript. many times clients have requirements l...

Read More

Dec-23-2020