Php Laravel Yajra Datatables with Example

Php Laravel Yajra Datatables with Example

Data tables provides an attractive look and feature to the data view and user interaction. In this php laravel tutorial, i will let you know about laravel yajra datatables with an example. If you don’t know about yajra datatable, So there is no need to be worry. I am sure after reading this article, you can say you know yajra datatables and can implement it into your laravel application.

As we know, if we need to show mutiple data like customers data into grid view, then HTML data table can be great solution because of the feature it has like quick search, pagination, sorting,  ordering etc. And we can use these features in our project easily.   

So let’s see the example of yajra datatable in our laravel application. We will  start integration process from scratch. So please follow some simple steps as given below with the fresh installation of laravel application.

Step 1: Install laravel

In the first step we will install laravel with the latest version. If you have already installed laravel application, then you can directly jump to the second step. Open your terminal or command prompt and run the following composer command.

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

Step 2 : Install Yajra Datatable

After installing laravel application, we will install yajra datatable in our application using the ccomposer require command in the terminal as given below.

composer require yajra/laravel-datatables-oracle

After downloading yajra datatable package, we will need to add provider and alias in config/app.php. So open this file and add as mentioned in below code.

config/app.php

.....
'providers' => [
  ....
  Yajra\DataTables\DataTablesServiceProvider::class,
]
'aliases' => [
  ....
  'DataTables' => Yajra\DataTables\Facades\DataTables::class,
]
.....

Step 3: Insert Some Dummy Records

Now, in this third step we will insert some dummy records to show in the datatable. So for inserting dummy data we will use tinker factory. Open your terminal and run the following command.

php artisan tinker

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

Step 4: Add Route

Since, in this example we will show user data into the yajra datatable. So, we will need to create route to handle request coming from web browser. Open routes/web.php file and add the route as given below.

routes/web.php

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

Step 5: Create Controller

After creating route, we will create controller and put all the logices in this controller. As mentaioned in the route, we are using UserController. So let’s create controller file and update the code as written below.

app/Http/Controllers/UserController.php

<?php
     
namespace App\Http\Controllers;
     
use App\User;
use Illuminate\Http\Request;
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 View/ Blade template

In this last step, we will create view file which is basically a blade template and we have already called user view in controller’s method. So let’s create user.blade.php file and add the code to view users data in yajra datatable. 

resources/views/users.blade.php

<!DOCTYPE html>
<html>
<head>
    <title>Php Laravel Yajra Datatables with Example</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 7 Datatables Tutorial <br/> HDTuto.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: 'DT_RowIndex', name: 'DT_RowIndex'},
            {data: 'name', name: 'name'},
            {data: 'email', name: 'email'},
            {data: 'action', name: 'action', orderable: false, searchable: false},
        ]
    });
    
  });
</script>
</html>

Now, we have successfully integrated yajra datatable in our lravel application. Now we can run this application in localhost using the following artisan command.

php artisan serve

After runing the above command in terminal, we can put the link below in the web browser and can see the datatable with their functionalities.

http://localhost:8000/users

You can also learn to implement sorting and pagination in laravel clicking on the link below.

Laravel 5 table column sorting and pagination example with kyslik/column-sortable