what is yajra datatables plugin in laravel how to implement it

Posted On:

Posted In:

Data is an essential part of every web application. It holds the information regarding that particular app. So, the developer should properly carry out the data displaying task. The importance of displaying information effectively is a necessity for any application to be able to be User Friendly. Fortunately, Laravel has a plugin called Yajra Datatables, which simplifies this task. 

What is Yajra  plugin?

Yajra datatables is a JQuery plugin used to implement pagination in the web page and helps in sorting, searching, and arranging the data

How to use Yajra Datatables Plugin?

Step 1: Install Yajra Package 

First, you have to install Yajra Datatables Package, run this command to install Yajra Datatables

composer require yajra/laravel-datatables-oracle.

Step 2: Set Providers and Alias

Open config/app.php File

….. 

‘providers’ => [ 

   …. 

   Yajra\DataTables\DataTablesServiceProvider::class, 

] 

‘aliases’ => [ 

   …. 

   ‘DataTables’ => Yajra\DataTables\Facades\DataTables::class, 

] 

Step 3: Create Dummy Records

Now create some dummy records to fill the datatables, run this command in command-line 

php artisan tinker 

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

This command creates a fake data in your database.

Step 4: Create Route 

Open your routes/web.php file and create this route:

Route::get(‘user’, ‘UserController@index’)->name(‘user.list);

Step 5: Create Controller

Open app/http/controllers/ folder, create UserController file with this code. 

<?php

namespace App\Http\Controllers; 

use App\User; 

use Illuminate\Http\Request; 

use DataTables; 

    

class UserController extends Controller 

{ 

   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”>Edit</a>’; 

                           return $btn; 

                   }) 

                   ->rawColumns([‘action’]) 

                   ->make(true); 

       } 

       return view(‘users’); 

   } 

} 

Step 6: Create View 

Create a resources/views/index.blade.php file and create a view like this.

<!DOCTYPE html> 

<html> 

<head> 

   <title>Datatable</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”> 

</head> 

<body> 

   

<div class=“container”> 

   <table class=“table table-bordered data-table”> 

       <thead> 

           <tr> 

               <th>No</th> 

               <th>Name</th> 

               <th>Email</th> 

               <th>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(‘user.list’) }}”, 

       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> 

Now your code is ready to be executed, run this command:

php artisan serve 

Conlusion

I hope this tutorial was informative and helpful for your Laravel development. For more such tuts, please check our blog and share this article with your other Laravel learner buddies. Happy Coding!! 

If you are looking for a software firm to create your business website or mobile app, your search ends here. We build affordable and robust software solutions for businesses to digitally thrive on. Contact us to get a quote. You can mail us on [email protected] or WhatsApp us on +91 95 37 84 38 39. 

Latest Posts

best wordpress builder

Block Editor vs Divi vs Elementor: Choosing Best WordPress Builder

March 13, 2024

A few years back website creation demanded a lot of technical knowledge and proficiency in HTML, CSS, and JavaScript. The scenario has changed, building a user-friendly website with no code is possible. Today, a variety…

How to publish only approved content in WordPress

How to publish only approved content in WordPress?

March 9, 2024

‘Why did you post without approval?’ this question is often part of the discussion when more than two people handle the content part of the WordPress website. Seeking approval before posting not only helps to…

Leave a Reply

Your email address will not be published. Required fields are marked *