How To Install Yajra Datatable In Laravel 10

Websolutionstuff | Mar-01-2023 | Categories : Laravel

In this article, we will see how to install datatable in laravel 10. Here, we will learn about the laravel 10 yajra datatable example. As we all used datatable on our backend side project. So, here we will show you the laravel 10 datatable example.

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

So, let's see yajra datatable in laravel 10, laravel 10 yajra datatable example, datatable example in laravel 10, and install yajra datatables laravel 10.

Step 1: Install Laravel 10 For Yajra Datatable Example

Step 2: Install Yajra Datatable Package

Step 3: Create Dummy Records Using Tinker

Step 4: Add New Route

Step 5: Create UserController For Datatable

Step 6: Create Blade File

 

 

Step 1: Install Laravel 10 For Yajra Datatable Example

Now, we will create a new project set up for this Laravel 10 Yajra Datatable Example.

composer create-project --prefer-dist laravel/laravel datatable_example

 

Step 2: Install Yajra Datatable Package

In this 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:"^10.0"

If you are using most of the DataTables plugins like Buttons & Html, you can alternatively use the all-in-one installer package.

composer require yajra/laravel-datatables:^9.0

 

Configuration

This step is optional if you are using Laravel 5.5+.

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, we 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, we will create a route for yajra datatable example in laravel 10

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 the layout and get data requests and return responses.

php artisan make:controller UserController

Now, add the below code in the UserController.

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::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 a users.blade.php file. So. add the following code to that file.

resources/views/users.blade.php

<!DOCTYPE html>
<html>
<head>
    <title>How To Install Yajra Datatable In Laravel 10 - Websolutionstuff</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>How To Install Yajra Datatable In Laravel 10</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
How To Backup Database In Laravel 9 Using Spatie
How To Backup Database In Lara...

In this article, we will see how to back up the database in laravel 9 using spatie. Here, we will learn automatic&n...

Read More

Feb-08-2023

How to Increase max_input_vars in PHP Ubuntu
How to Increase max_input_vars...

Hey folks! If you've ever encountered issues with PHP hitting the max_input_vars limit, you're not alone. In thi...

Read More

Feb-02-2024

How to Use Bitmasks for Efficient Data Filtering?
How to Use Bitmasks for Effici...

Data filtering might not sound like the most thrilling topic, but when it comes to processing large volumes of informati...

Read More

Oct-25-2023

How To Send Email With Attachment Using Node.js
How To Send Email With Attachm...

Hello Guys, In this tutorial we will see how to send email with attachment using node.js app. In this tutorial w...

Read More

Aug-09-2021