Donations Appreciated

You have not lived today until you have done something for someone who can never repay you. - John Bunyan

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

EloquentController.php - Datatables using Eloquent ORM with Master and Details Table

Id Name Email Created At Updated At


public function getMaster()
    return view('datatables.eloquent.master');

public function getMasterData()
    $users = User::select();

    return Datatables::of($users)
        ->addColumn('details_url', function($user) {
            return url('eloquent/details-data/' . $user->id);

public function getDetailsData($id)
    $posts = User::find($id)->posts();

    return Datatables::of($posts)->make(true);


    var template = Handlebars.compile($("#details-template").html());
    var table = $('#users-table').DataTable({
        processing: true,
        serverSide: true,
        ajax: '',
        columns: [
                "className":      'details-control',
                "orderable":      false,
                "searchable":      false,
                "data":           null,
                "defaultContent": ''
            {data: 'id', name: 'id'},
            {data: 'name', name: 'name'},
            {data: 'email', name: 'email'},
            {data: 'created_at', name: 'created_at'},
            {data: 'updated_at', name: 'updated_at'}
        order: [[1, 'asc']]

    // Add event listener for opening and closing details
    $('#users-table tbody').on('click', 'td.details-control', function () {
        var tr = $(this).closest('tr');
        var row = table.row(tr);
        var tableId = 'posts-' +;

        if (row.child.isShown()) {
            // This row is already open - close it
        } else {
            // Open this row
  'td').addClass('no-padding bg-gray');

    function initTable(tableId, data) {
        $('#' + tableId).DataTable({
            processing: true,
            serverSide: true,
            ajax: data.details_url,
            columns: [
                { data: 'id', name: 'id' },
                { data: 'title', name: 'title' }

Details Template (using Handlebars)

    <script id="details-template" type="text/x-handlebars-template">
        <div class="label label-info">User {{ name }}'s Posts</div>
        <table class="table details-table" id="posts-{{id}}">