DataTables

datatables logo

DataTables is a plug-in for the jQuery JavaScript library. It is a highly flexible tool, based upon the foundations of progressive enhancement, which will add advanced interaction controls to any HTML table.

Key features:

  • Variable length pagination
  • On-the-fly filtering
  • Multi-column sorting with data type detection
  • Smart handling of formatted data for display & filter/sort purpose
  • Smart handling of column widths
  • Display data from almost any data source
  • DOM, JavaScript array, Ajax file and server-side processing (PHP, C#, Perl, Ruby, AIR, Gears, Python, etc.)
  • Scrolling options for table viewport
  • Fully internationalisable
  • jQuery UI ThemeRoller support
  • Rock solid - backed by a suite of 2600+ unit tests
  • Wide variety of plug-ins inc. TableTools, FixedColumns, KeyTable and more

Default HTML table

For DataTables to be able to enhance an HTML table, the table must be valid, well formatted HTML, with a header (thead) and a body (tbody). An optional footer (tfoot) can also be used.

<table id="example" class="display">
   <thead>
      <tr>
         <th>Company name</th>
         <th>Address</th>
         <th>Town</th>
      </tr>
    </thead>
    <tbody>
       <tr>
          <td>Emkay Entertainments</td>
          <td>Nobel House, Regent Centre</td>
          <td>Lothian</td>
       </tr>
       <tr>
          <td>The Empire</td>
          <td>Milton Keynes Leisure Plaza</td>
          <td>Buckinghamshire</td>
       </tr>
    </tbody>
</table>

Initializing the plugins:

After the proper include of the required JavaScript/JQuery libraries the plug-in can be initialized with a few line of code. The text following the # character and the id attribute of the table must be identical.

$(document).ready(function() {
    $('#example').dataTable();
});
Company name Address Town
Emkay Entertainments Nobel House, Regent Centre Lothian
The Empire Milton Keynes Leisure Plaza Buckinghamshire

TITLE: DataTables
DATE: 2018-01-25
AUTHOR: jRu
SOURCE:
TAGS:
coding datatables jquery tables