Laravel 5.1 with Datatables Quick Starter

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/
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();
```

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

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>

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);
    }
}

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

Register datatables routes in app\Htpp\routes.php

Route::controller('datatables', 'DatatablesController', [
    'anyData'  => 'datatables.data',
    'getIndex' => 'datatables',
]);

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:

Donations Appreciated