Laravel Datatable Example Tutorial

Today we will see laravel datatable example tutorial. as we know datatables provides users to many functionalities like earch records, filter data, pagination, search button, custom button, responsive table 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 and see  how to implement datatable in laravel.

Step 1: Create new project in laravel for laravel datatable example tutorial

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 below command in your project to get the new 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

here we 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 Tutorial- techsolutionstuff.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..

 

FEATURE POSTS