Complete Datatable Setup

In this article, we will discuss the complete Datatable Setup. In this tutorial, I will show you how to setup server-side ajax record, pagination, responsive tables, column visibility control and most important the use button extensions. Datatable Button extension allows us to create an option to Export data to Excel, CSV, PDF and also print the data.

I’m building an example with the Laravel framework. So I’m assuming you are familiar with the Laravel basics. If no then please follow some of the given tutorials or check back our other articles.

• Laravel Setup
• Laravel Default Authentication Setup
• Understanding Laravel Middleware
• All You Need to Know Laravel Routing
• Setup Virtual Host with Xampp Server

Step 1: Add the required libraries for CSS and javascript.

// Styles
// Datatable core style
<link rel="stylesheet" href="{{ asset('assets/lib/datatables/jquery.dataTables.css') }}">
// Datatable Button extension styles
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.5.1/css/buttons.dataTables.min.css">

// JS 
// Datatable Js
<script src="{{ asset('assets/lib/datatables/jquery.dataTables.js') }}"></script>
// Datatable Responsive Support
<script src="{{ asset('assets/lib/datatables-responsive/dataTables.responsive.js') }}"></script>

// Button extension
// Buttons for export excel / csv
<script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.1/js/dataTables.buttons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>

// Button for PDF export
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.print.min.js"></script>

// Button for print
<script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.colVis.min.js"></script>

Step 2: Create HTML table, where we apply datatable.

<div class="table-wrapper">
  <table id="dt_Table" class="table display responsive nowrap">
    <thead>
      <tr>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Email</th>
        <th>Mobile No</th>
        <th>Status</th>
      </tr>
    </thead>
    <tbody>
      <!-- Ajax Load -->
    </tbody>
  </table>
</div>

In the above code, tbody is empty, and it’s updated with the ajax response.

Step 3: Let’s add the js which apply datatable to our HTML table.

// Add specific class name to all the buttons
$.fn.dataTable.Buttons.defaults.dom.button.className = 'btn';

// Datatable
var dt_Table = $('#dt_Table').DataTable({

  // Call ajax to load records
  "ajax": Laravel.appUrl+'/customers/json',

  // Mapping data 
  "columns": [
    { data: first_name },
    { data: last_name },
    { data: email },
    { data: 'mobileno' },
    { data: 'email' },
    { data: null },
  ],

  // Manage length of record dropdown
  "bLengthChange": false,

  // Manage Search
  "searching": false,

  // Manage sorting asc or desc
  "ordering": false,

  // Manage responsive 
  "responsive": true,
  "autoWidth": false,

  // Manage template 
  dom: 'Bfrtip',

  // Manage buttons dropdown  
  buttons: [
    {
      extend: 'collection',
      text: 'Options', // Label
      className: '', // class name
      buttons: [
        {
          extend: 'excelHtml5', // Export to excel button
          className: '',  // class name
          exportOptions: { 
            columns: ':visible' // Only visible columns available for export
          }
        },
        {
          extend: 'csvHtml5', // Export to CSV button
          className: '',  // class name
          exportOptions: {
            columns: ':visible' // Only visible columns available for export
          }
        },
        {
          extend: 'pdfHtml5', // Export to PDF button
          className: '',  // class name
          exportOptions: {
            columns: ':visible' // Only visible columns available for export
          }
        },
        {
          extend: 'print',  // Print button
          className: '',  // class name
          exportOptions: {
            columns: ':visible' // Only visible columns available for export
          }
        }
      ]
    },
    {
      extend: 'colvis', // Manage column visibity
      className: '',  // class name
      text: 'Columns' // Label
    },
    {
      text: 'Custom Button',  // Label for custom button
      className: '',  // class name
      action: function ( e, dt, node, config ) {
        // Custom Button
        // Add event for this custom button such as click, change or etc.
      }
    }
  ]
});

Step 4: Here’s getJson method of customer controller.

/**
 * List of customers
 */
public function getJson()
{
  $customers = App\Customer::get();
  return response()->json([
    'data' => $customers
  ]);
}

Step 5: Register route for this function.

Route::get('/customers/json','CustomerController@getJson')->middleware('ajax');

Finally, Datatable integration is done. In this tutorial, I’m trying to explain you basic setup of the Datatable. We will discuss more on datatables in future article. Feel free to comment if any query.

If you like our content, please consider buying us a coffee.
Thank you for your support!
Buy Me a Coffee