Automating data with Datatables on Laravel 5.6

At this time I will discuss about automating tables with data from the database. When I was in school, I wrote many lines of code to make a structured and beautiful data to display, including the orderby, pagination and other features, but now there are many of the open source communities that automate some of these features with a little code, namely with Datatables, DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, build upon the foundations of progressive enhancement, that adds all of these advanced features to any HTML table.First, make sure you have an application laravel version 5.6, also has installed the yazra/laravel-datatables package. This package is created to handle server-side works of DataTables jQuery Plugin via AJAX option by using Eloquent ORM.

And for Datatables we will use the CDN script in the html header so that you don't have to bother downloading.

Now create a route with the get method to render html views,

Route::prefix('posts')->group(function () {
    Route::get('/', 'PostsController@index')->name('posts.index');
    Route::get('datatables_posts','PostsController@datatables')->name('datatables_posts');
});

In the controller, create 2 public functions, index and datatables, index to render views, while datatables to provide data accessed via the datatables script in the frontend.

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\PostsModel;
use Yajra\Datatables\Datatables;

class PostsController extends Controller
{
    public function index(){
     return view("posts.index");
    }

    public function datatables(){
        $posts = PostsModel::all();
        return Datatables::of($posts)
            ->addColumn('action', function($posts){
                return '<div class="form-group"><a class="btn btn-default" href="https://www.blogger.com/u/1/posts/edit/'.$posts-%3Eid.'">Edit</a></div><form action="'.route('posts.delete').'" method="POST"><input name="_token" type="hidden" value="'.csrf_token().'" /> <input name="post_id" type="hidden" value="'.$posts-&gt;id.'" /><button class="btn btn-default" type="submit">Delete</button></form>';
            })->make(true);
    }
}

And this is for viewing index requirements. Here datatables will be initialized and do queries on public function datatables.

@include('layouts.backend.header')

<div class="wrapper">
 
@include('layouts.backend.nav')

@include('layouts.backend.sidebar')

  <!-- Content Wrapper. Contains page content -->
  <br />
<div class="content-wrapper">
<!-- Content Header (Page header) -->
    <br />
<section class="content-header">
      <h1>
        Posts
        <small>Index</small>
      </h1>
</section>
    <!-- Main content -->
    <section class="content">
    <div class="panel panel-default">
    <div class="panel-body">
    <a href="https://www.yourwebsite.com/{{ route('posts.add') }}">Add</a>
    </div>
</div>
<table class="display table table-striped table-bordere" id="table_contact">
<thead>
       <tr>            
<th>Title</th>
           <th>Created</th>
           <th>Updated</th>
           <th>Action</th>
       </tr>
</thead>
</table>
</section>
<!-- /.content -->
</div>
@include('layouts.backend.credit')

</div>
<!-- ./wrapper -->

@include('admin.info.contact.script')
<script type="text/javascript">
 $(document).ready( function () {
     $('#table_contact').DataTable( {
      ajax: "{{ route('datatables_posts') }}",
      columns: [
                { data: 'post_title' },
                { data: 'created_at'},
                { data: 'updated_at'},
                { data: 'action'},
            ]
  });
 });
</script>

@include('layouts.backend.footer')

In that view you have included several layouts separately, for layout you can make your own custom, and don't forget to layout headers to include CDN JQuery and datatables to execute queries.

If everything has been done, and when accessed by http://localhost: 8000/posts displays the look below:

Datatables query result

You have successfully used datatables, this tutorial is just as a basis for getting to know datatables, for more complete and detailed, you can visit the official website. And as a note, the results of the above data will appear if the intended table already has the data in question.

Read More