Laravel Datatables Example

Websolutionstuff | May-16-2020 | Categories : Laravel PHP jQuery

In this example, I will show you how to implement/install data tables in laravel. Datatables provides users with many functionalities like search buttons, custom buttons, responsive table, search records, filter data, pagination, etc, yajra datatable is one of the famous packages in laravel and PHP.

So, let's see laravel 6/7 datatables example, how to install datatables in laravel 6, the example of datatable in laravel 6/7, use datatables in laravel 7, yajra datatables laravel 6 crud example, laravel datatables server-side, laravel datatables AJAX

Datatables are basically jQuery plugins that allow you to add advanced interaction controls to your HTML tables data. Datatables also provide ajax for data searching and getting.

Step 1: Create new project in laravel 6/7

We are creating a new project set up for this example, So create a new project using the below command.

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

 

 

Step 2 : Install Yajra Datatable Package

Run the following command in your project to get the latest version of the datatable package.

composer require yajra/laravel-datatables-oracle

After that, you 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 Some Dummy Records Using Tinker

After adding aliases and providers are adding some dummy records in databse using the below command.

php artisan tinker

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

 

 

Step 4: Create New Route

Now in this step, we are creating a new route for datatable example in this path Routes/web.php

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

 

Step 5: Create Controller For Datatable

After adding the route we need to create a controller to manage the layout and get data requests and return responses, follow below command for creating controller

php artisan make:controller UserController

After this, we need to add the below code in this path 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 create the users.blade.php file for view in this path 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>

 Now, We are all completed our code, so it's time to run this project...

So, copy the below command and run it in the terminal.

php artisan serve

and finally, you can run this project on your browser. 

http://localhost:8000/users

 


You might also like:

Recommended Post
Featured Post
Laravel 9 Barcode Generator Example
Laravel 9 Barcode Generator Ex...

In this article, we will see laravel 9 barcode generator example. In this example we will use the milon/barcod...

Read More

Mar-26-2022

Laravel 9 Multiple Where Condition Query Example
Laravel 9 Multiple Where Condi...

In this article, we will see the laravel 9 and laravel 10 multiple where condition query example. We will learn&nbs...

Read More

Sep-30-2022

How To Create Dynamic XML Sitemap In Laravel 9
How To Create Dynamic XML Site...

In this article, we will see how to create a dynamic XML sitemap in laravel 9. As we know sitemap is a very im...

Read More

Jun-08-2022

Advanced Custom Error Handling and Logging Strategies in Laravel 11
Advanced Custom Error Handling...

Hello, laravel web developers! In this guide, I’ll walk you through setting up advanced error handling and logging...

Read More

Oct-04-2024