How to Use Yajra Datatables in Laravel 10

by

For laravel datatables example mostly used the Yajra Datatables in laravel for pagination and search functionality. Yajra DataTables is a powerful package for Laravel that simplifies data management and display by providing advanced features for handling large datasets. It provides a simple and efficient way to handle large amounts of data in tables and also allows you to easily filter, sort, and search the data and more.

So through the Laravel Datables example, you will learn step-by-step guide on how to use Yajra DataTables in Laravel 10.

Some of the top features of Yajra Datatables:

  • Pagination
  • Instant search
  • Multi-column ordering
  • Use almost any data source
  • Easily theme-able
  • Wide variety of extensions
  • Mobile friendly
  • Fully internationalise

This quick and simple tutorial offers you a facile example of yajra datatables using Bootstrap for pagination, and search functionality in laravel app.

Laravel 10 Yajra Datatable Example Tutorial

Use to follow the following steps to integrate yajra datatables in laravel 10 apps:

  • Step 1: Download Laravel App
  • Step 2: Connect App to Database
  • Step 3: Install Yajra Datatables Package
  • Step 4: Add Fake Records for Testing
  • Step 5: Make Routes for yajra Datatables
  • Step 6: Create DataTable Controller
  • Step 7: Create Blade View File
  • Step 8: Run Development Server

Download Laravel App

The first step begins with creating a new laravel application using the composer command:

composer create-project --prefer-dist laravel/laravel yajra-datatables

Go inside the app:

cd yajra-datatables

Connect App with Database

After that, you need to add the database name, username equally important password in .env configuration file:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=yajradatatables
DB_USERNAME=root
DB_PASSWORD=

Install Yajra Datatable Package

Begin by installing the Yajra DataTables package using Composer. Open your terminal and navigate to your Laravel project directory, then run the following command:

composer require yajra/laravel-datatables-oracle

Next update the service of the package such as datatable service provider in providers and alias inside the config/app.php file.

 'providers' => [
   
   Yajra\Datatables\DatatablesServiceProvider::class,
],
'aliases' => [

  'Datatables' => Yajra\Datatables\Facades\Datatables::class,
]

Run vendor publish command further this step is optional:

php artisan vendor:publish --provider="Yajra\DataTables\DataTablesServiceProvider"

Add Fake Records for Testing

Now, run the migration command to generate users and related tables to the database:

php artisan migrate

To give you the demo of Yajra DataTables in Laravel, we need to generate a handful of dummy data. Use the built-in plugin Faker, and it respectively creates the fake data in the database.

php artisan tinker

Now to generate the dummy records to run below command.

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

Make Routes for yajra Datatables

Open routes/web.php file and define the route to access the yajra data tables from view:

<?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');

Create DataTable Controller

Create a controller that will handle the server-side processing of DataTables requests. Run the following command to generate the controller:

php artisan make:controller UserController

Open the app/Http/Controllers/UserController.php file and add the following code.

<?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');
    }
}

Create Blade View File

Next, navigate the resources/views/ directory and create a new file named as  users.blade.php.

Next open the resources/views/users.blade.php file and put the below code on it:

<!DOCTYPE html>
<html>
<head>
    <title>Laravel 8 Datatables Tutorial - codingdriver.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 8 Datatables Tutorial <br/> codingdriver.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: true, searchable: false},
        ]
    });
    
  });
</script>
</html>

Run Development Server

You’re now ready to view the DataTables in your browser. Start your Laravel development server by running the php artisan serve command.

php artisan serve

then access the DataTables view by visiting http://localhost:8000/users

http://localhost:8000/users

So, you have successfully implemented the Laravel Yajra Databales. I hope this work for you.

Leave a Comment