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 Livewire File Upload Example
Laravel 9 Livewire File Upload...

In this article, we will see the laravel 9 livewire file upload example. Here, we will learn how to upload files us...

Read More

Dec-02-2022

How To Use Array In React JS
How To Use Array In React JS

In this article, we will see how to use an array in React JS. We can use the JavaScript standard Array functio...

Read More

Aug-12-2022

How To Upload Large CSV File Using Queue In Laravel 9
How To Upload Large CSV File U...

In this article, we will see how to upload a large CSV file using queue in laravel 9. Here we will learn large numb...

Read More

Sep-16-2022

Datatables Expand/Collapse Columns
Datatables Expand/Collapse Col...

In this article, we will see how to expand/collapse columns in datatable. The Datatables API has a number of method...

Read More

Jun-05-2022