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 !

Basic Two DataTables

Two DataTables in a Page Implementation Tutorial is available at

IdNameEmailCreated AtUpdated At
Id Title Created By Created At Updated At


Route::get('services/two-datatables', 'ServiceController@getUsersDataTables');


public function getUsersDataTables(UsersDataTable $dataTable){
    return $dataTable->render('datatables.service.two-datatables');
public function getPostsDataTables(PostsDataTable $postsDataTable){
    return $postsDataTable->render('datatables.service.two-datatables');


use App\Post;

public function ajax()
    return $this->datatables
public function query(){
    $users = Post::query()
                ' as id',
                'posts.title as title',
                'posts.created_at as created_at',
                'posts.updated_at as updated_at',
                ' as created_by'
            ->leftJoin('users', 'posts.user_id', '=', '');

    return $users;


<div class="tabs">
    <ul class="nav nav-tabs">
        <li class="active">
            <a href="#users" role="tab" data-toggle="tab">
                <icon class="fa fa-home"></icon>Users
            <a href="#posts" role="tab" data-toggle="tab" onclick="postsDataTables()">
                <i class="fa fa-user"></i>Posts
    <div class="tab-content">
        <div class="tab-pane fade active in" id="users">
            <?php echo $dataTable->table(['class' => 'table table-bordered table-condensed']); ?>

        <div class="tab-pane fade" id="posts">
            <table class="table table-bordered table-condensed" id="postsTable">
                    <th>Created By</th>
                    <th>Created At</th>
                    <th>Updated At</th>


function postsDataTables() {
    if (!$.fn.dataTable.isDataTable('#postsTable')) {
            dom: 'Bfrtip',
            processing: true,
            serverSide: true,
            order: [[0, 'desc']],
            buttons: [
                'csv', 'excel', 'pdf', 'print', 'reset', 'reload'
            ajax: '/services/two-datatables/posts',
            columns: [
                {data: 'id', name: ''},
                {data: 'title', name: 'posts.title'},
                {data: 'created_by', name: '', width: '110px'},
                {data: 'created_at', name: 'posts.created_at', width: '120px'},
                {data: 'updated_at', name: 'posts.updated_at', width: '120px'},
            order: [[0, 'desc']]