Laravel 8 Yajra Datatable Example Tutorial

Websolutionstuff | Sep-30-2020 | Categories : Laravel PHP

In this article, we will see the laravel 8 yajra datatable example tutorial. Datatable provides users to many functionalities like a search button, export data, custom button, responsive table, search records, filter data, pagination, etc. Yajra datatable is one of the famous packages in laravel and PHP.

Datatables are basically jQuery plugins that allow you to add advanced interaction controls to your HTML tables data. Laravel yajra datatables also provide ajax for data searching and getting records. You install laravel datatable using the composer. Also, you can read more on the official document: yajra datatable.

So, let's see server side datatable in laravel 8 and how to use datatables in laravel 8.

Yajra Datatable Example In Laravel 8

Step 1: Create a New Project In Laravel 8

Step 2: Install Yajra Datatable Package

Step 3: Create Dummy Records Using Tinker

Step 4: Add New Route

Step 5: Create Controller For Yajra Datatable

Step 6: Create Blade File

Step 7: Run Laravel Application

 

Step 1: Create a New Project In Laravel 8

In this step, we will create a new project set up for the laravel yajra datatable example.

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

 

 

Step 2: Install Yajra Datatable Package

Now, run the following command in a project to get the latest version of the data table package.

composer require yajra/laravel-datatables-oracle

Note: This step is optional if you are using Laravel 5.5+

you need to add providers and alias in the 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 will add some dummy records in the database using the below command.

php artisan tinker

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

 

 

Step 4: Add New Route

In this step, we are creating a new route for a datatable example in the web.php file.

routes/web.php

Route::get('users', ['uses'=>'App\Http\Controllers\UserController@index', 'as'=>'users.index']);

 

Step 5: Create Controller For Yajra 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

After this, we will add the below code in the UserController.php file.

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, we will create the users.blade.php file for viewing.

resources/views/users.blade.php

<!DOCTYPE html>
<html>
<head>
    <title>Laravel Datatables 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 Datatables 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>

 

Step 7: Run Laravel Application

Copy the below command and run it in the terminal.

php artisan serve

After that, open the below URL in the browser.

http://localhost:8000/users

 


You might also like:

Recommended Post
Featured Post
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

Jquery Search Filter Example
Jquery Search Filter Example

In this small post i will so you jquery search filter example. here we will see how to search data using jquery filter....

Read More

Aug-25-2021

Laravel 9 User Roles and Permissions Without Package
Laravel 9 User Roles and Permi...

In this article, we will see laravel 9 user roles and permissions without package. Roles and permissions are an imp...

Read More

Apr-14-2022

How To Get Current Week Records In MySQL
How To Get Current Week Record...

In this tutorial, we will see how to get current week records in MySQL. Many times we need to get current week reco...

Read More

Feb-07-2022