How to initialize Datatable plugin?

Datatables.net is a sophisticated plug-in built on the jQuery JavaScript library. It provides enhanced functionality to normal HTML tables, offering built-in search, pagination, and sorting features.

Download & Assets

The asset files can be downloaded via the following methods:

• Official Website: datatables.net/download/index
• CDN Links: cdn.datatables.net

Basic Implementation of Datatable

• Write the basic markup of the table with data.
• Add a unique ID or class name to the table.
• Include all the assets.
• As Datatables.net is built on jQuery, ensure that jQuery is loaded before the DataTables script.

<table class="dashboard-table" id="example">
  <thead>
    <tr>
      <th>Sites</th>
      <th>Followers</th>
      <th>Rank</th>
      <th>Country</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>SitePoint</td>
      <td>11456</td>
      <td>5</td>
      <td>Canada</td>
    </tr>
  </tbody>
</table>

Initialize the table with the following JavaScript:

$(function(){
  $("#example").dataTable();
});

You may continue this series in our next post: DataTables.net Plugin Options.

Also, read how to manipulate DOM using jQuery.