Laravel Datatables Example

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

In this example i will show you how to implement/install datatables in laravel. Datatables provides users to many functionalities like search button , custom button , responsive table , search records, filter data, pagination etc , yajra datatable is one of the the famous package in laravel and php.

Datatables is basically jQuery plugins 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 start...

Step 1: Create new project in laravel 

We are creating new project setup for this example ,So create new project using 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 below command.

php artisan tinker

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

 

Step 4: Create New Route

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

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

 

Step 5: Create Controller For Datatable

After adding route we need to create controller to manage layout and getting data request and return response, follow below command for create controller

php artisan make:controller UserController

After this we need to add 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 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 all completed with our code So, it's time to run this project....

So Copy below command and run in terminal.

php artisan serve

and finally you can run this project on your browser. 

http://localhost:8000/users

 

Featured Post