Donations Appreciated

There is no exercise better for the heart than reaching down and lifting people up. - John Holmes

Click here to lend your support to: Laravel Datatables and make a donation at pledgie.com !

Laravel 5.1 with Datatables Quick Starter

  1. Let's begin by creating a new Laravel project

    Visit Laravel's Documentation for more details about creating a new project then onfigure your site.

    $ laravel new datatables
    If you're using homestead, add datatables.app on sites and update your hosts file. Access you new site to make sure you successfully installed and configured your Laravel site. http://datatables.app/

  2. Let's migrate the default users table and seed some records

    Run default Laravel migrations.

    $ cd /path/to/datatables
    $ php artisan migrate
    Seed some users data using tinker.
    $ php artisan tinker
    >>> factory(App\User::class, 100)->create();

  3. Install Laravel Datatables Package

    Install using composer.

    $ composer require yajra/laravel-datatables-oracle

    Add Datatables Service Provider and Facade on config/app.php.

    Yajra\Datatables\DatatablesServiceProvider::class,
    'Datatables' => Yajra\Datatables\Facades\Datatables::class,

    Lastly, publish the configuration file.

    $ php artisan vendor:publish

  4. Install DataTables Assets

    Install DataTables assets on your master layout or view where you want to use it.

    DataTables CSS

    jQuery

    DataTables

    For this tutorial, let's create a master layout file for our application by creating a new file on: resources/views/layouts/master.blade.php.

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="utf-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <title>Laravel DataTables Tutorial</title>
    
            <!-- Bootstrap CSS -->
            <link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
            <link rel="stylesheet" href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css">
    
            <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
            <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
            <!--[if lt IE 9]>
                <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
                <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
            <![endif]-->
            <style>
                body {
                    padding-top: 40px;
                }
            </style>
        </head>
        <body>
            <div class="container">
                @yield('content')
            </div>
    
            <!-- jQuery -->
            <script src="//code.jquery.com/jquery.js"></script>
            <!-- DataTables -->
            <script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
            <!-- Bootstrap JavaScript -->
            <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
            <!-- App scripts -->
            @stack('scripts')
        </body>
    </html>

  5. Create a controller for DataTables application using Artisan.

    $ php artisan make:controller DatatablesController --plain

    Import Datatables class on our controller.

    You can import the Datatables facade.

    use Datatables;
    Or, directly import the class to make it more IDE friendly.
    use Yajra\Datatables\Datatables;

    Now, let's create a method to display our view and a method that will process our datatables ajax request.

    /**
     * Displays datatables front end view
     *
     * @return \Illuminate\View\View
     */
    public function getIndex()
    {
        return view('datatables.index');
    }
    
    /**
     * Process datatables ajax request.
     *
     * @return \Illuminate\Http\JsonResponse
     */
    public function anyData()
    {
        return Datatables::of(User::query())->make(true);
    }

    Below is how our controller should look.

    namespace App\Http\Controllers;
    
    use App\Http\Requests;
    use App\User;
    use Yajra\Datatables\Datatables;
    
    class DatatablesController extends Controller
    {
        /**
         * Displays datatables front end view
         *
         * @return \Illuminate\View\View
         */
        public function getIndex()
        {
            return view('datatables.index');
        }
    
        /**
         * Process datatables ajax request.
         *
         * @return \Illuminate\Http\JsonResponse
         */
        public function anyData()
        {
            return Datatables::of(User::query())->make(true);
        }
    }
    
  6. Let's create our View

    On this example, we our going to display records of our users with the following fields.
    users: id, name, email, created_at, updated_at

    Let's create a new file for our view on resources\views\datatables\index.blade.php

    @extends('layouts.master')
    
    @section('content')
        <table class="table table-bordered" id="users-table">
            <thead>
                <tr>
                    <th>Id</th>
                    <th>Name</th>
                    <th>Email</th>
                    <th>Created At</th>
                    <th>Updated At</th>
                </tr>
            </thead>
        </table>
    @stop
    
    @push('scripts')
    <script>
    $(function() {
        $('#users-table').DataTable({
            processing: true,
            serverSide: true,
            ajax: '{!! route('datatables.data') !!}',
            columns: [
                { data: 'id', name: 'id' },
                { data: 'name', name: 'name' },
                { data: 'email', name: 'email' },
                { data: 'created_at', name: 'created_at' },
                { data: 'updated_at', name: 'updated_at' }
            ]
        });
    });
    </script>
    @endpush
    

  7. Register datatables routes in app\Htpp\routes.php

    Route::controller('datatables', 'DatatablesController', [
        'anyData'  => 'datatables.data',
        'getIndex' => 'datatables',
    ]);
    
  8. That's it! We can now browse our DataTables with Server Side processing with Laravel.

    Browse http://datatables.app/datatables and verify that your app is working.

    Expected Output:

    Expected Output