How to customise jquery datatables plugin navigation ?

In our previous article, We discussed about improving html table using Jquery datatables plugin. In this article we want to customize add one more navigation to datatable. When customising DataTables for your own usage, you might find that the default position of the feature elements (filter input,pagination,ordering etc) is not quite to your liking.

Let’s dive into jquery dataTables navigation customise

Datatable provides the domDT initialization parameter which can be set to indicate where you which particular features to appear in the DOM. You can also specify div wrapping containers (with an id and / or class) to provide complete layout flexibility.Each HTML control element presented by DataTables is denoted by a single character in the domDT option. For example the l option is used for the Length changing input option.

The built-in options available are:

l - Length changing
f - Filtering input
t - The Table!
i - Information
p - Pagination
r - pRocessing
< and > - div elements
<"#id" and > - div with an id
<"class" and > - div with a class
<"#id.class" and > - div with an id and class

Sample for jquery dataTables navigation customise

"<'table_top_header'>rt<'table_top_header table_footer'>"

This results in the following DOM structure:

<div class="wrapper">
  <div class="table_top_header">
    <div>{info}{length} 
      <div class="header_pagination">{filter}</div>
      {paging}
     </div>
  </div>
  {table} 
  <div class="table_top_header table_footer">
    <div>{info}{length} 
      <div class="header_pagination"></div>
      {paging}
      </div>
   </div>
</div>

In the example below, the table navigation is moved to the bottom of the table and each wrapper in a container div. The Javascript shown below is used to initialise the table shown in this example:

$(document).ready(function() {
    $('#example').dataTable( {
        "dom": "<'table_top_header'>rt<'table_top_header table_footer'>"
    } );
} );

The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:

  <table id="example">
   <tr class="header">
     <th>Products</th>
     <th>Plateform</th>
   </tr>
   <tbody>
     <tr>
         <td>SocialenginePress – Plugin for WordPress Product</td>
         <td>Socialengine</td>
      </tr>
       <tr>
         <td>SocialenginePress – Plugin for WordPress Blog</td>
         <td>Socialengine</td>
      </tr>
       <tr>
         <td>SocialenginePress – Plugin for WordPress Single Sign On</td>
         <td>Socialengine</td>
      </tr>
      .................
       <tr>
         <td>Socialengine Mobile Verification plugin(Anti-Spam)</td>
         <td>Socialengine</td>
      </tr>
       <tr>
         <td>Socialengine 2-Step Verification Plugin(Anti-Spam)</td>
         <td>Socialengine</td>
      </tr>
    </tbody>
  </table>

Conclusion

With this most basic setup, we can move to add one more navigation bottom of table. This blog is going to help you in reducing the manual work with jQuery Datatables. Feel free to contact us if you have any further queries.