DataTables : Advanced Interaction control for HTML Tables

DataTables is a plug-in for the jQuery Javascript library. It’s a highly flexible tool that adds advanced features like multicolumn ordering, state saving, multiple data sources, API, Ajax support, and more.

DataTables
datatables.net

DataTables comes with an optional Editor, it helps to create customized, editable tables. It’s a premium extension that can build complex, editable tables with drag and drop functionality. All advanced features offered by DataTbales are available in Editor.

Next, is the cloud version, CloudTables. It is a low-code or no-code alternative that offers seamless integration, customization, live updating, auditing, and more. CloudTables can be hosted on a local server or available as an instance from the CloudTables server. It is a subscription based service. A free “Personal” version can be used for testing purposes. The free version has limitations of 10 datasets and 250 records per dataset, but it is good enough for a developer to test the library and functionality.

DataTables Installation

DataTables is a powerful Javascript library that adds advanced customization to HTML tables. To get it running include the following files

  1. Javascript file
  2. CSS file

There are additional files that can be included to use the “Editor” feature or DataTables plugins and extensions. But to start using DataTables you need only these two files.

Requirments

DataTables need a minimal following setup to work.

Dependencies

Unlike other tools, DataTables have a single dependency, jQuery. It’s a jQuery extension that hooks into its plug-in system like other jQuery plugins.

HTML

HTML tables must be valid and well-formatted to be able to use the functionalities offered. A header tag (thead) and single body (tbody) and optional footer (tfoot) should be used.

Example:

<table id="table_id" class="display">
    <thead>
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Row 1 Data 1</td>
            <td>Row 1 Data 2</td>
        </tr>
        <tr>
            <td>Row 2 Data 1</td>
            <td>Row 2 Data 2</td>
        </tr>
    </tbody>
</table>

If you are generating HTML tables from server side (e.g. with C#, Ruby Script, PHP, etc) it should have requited tags. Tags help DataTables to understand table headers and click-to-order controls.

Note:

  • For Ajax sourced data, DataTables can automatically generate necessary tags.
  • DataTable support colspan and rowspan in header only. It should not be used in body.

Javascript / CSS Installation

You need to include Javascript to use DataTables, CSS is optional. CSS provides default styling, Style Theme Creator is used to customize the look and feel of the DataTable.

There are three different ways to include required files.

  • DataTables CDN
  • Locally
  • With Package manager

CDN

Include the following code in HTML.

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.4/css/jquery.dataTables.css">
  
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.11.4/js/jquery.dataTables.js"></script>

Note: Remember to add jQuery.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

Local Installation

Download the latest version of DataTables with download builder, unzip and upload it to the server. Files then can be included from the “DataTables” path.

<link rel="stylesheet" type="text/css" href="/DataTables/datatables.css">
 
<script type="text/javascript" charset="utf8" src="/DataTables/datatables.js"></script>

NPM or Bower

DataTables is available as an extension (datatables.net) for NPM and Bower. Both come with additional extensions and styling integrations.

npm install datatables.net    # Core library
npm install datatables.net-dt # Styling
bower install --save datatables.net
bower install --save datatables.net-dt

Initialising DataTables

After document loading initialize Datable with the following code

$(document).ready( function () {
    $('#table_id').DataTable();
} );

With this basic Initialisation, DataTables adds searching, ordering, paging functionality to the table by default.

Enhancements

DataTables customization is done by specifying configuration parameters in an object passed to the DataTable() function.

DataTables offer a great number of options to customize interface and features; it is done with configuration option that needs to be set at initialization.

Additionally, DataTables extensions provide their own options that can be set in the DataTables configuration object.

Here are a few examples to set options

  • Disable Paging
$('#example').DataTable( {
    paging: false
} );
  • Enable Scroll and disable paging
$('#example').DataTable( {
    paging: false,
    scrollY: 400
} );

Note: A full list of options is available here.

API

DataTables API offers six key areas for working with tables and data. Additionally, extensions and plugins can add additional APIs.

  1. Tables
  2. Columns
  3. Rows
  4. Cells
  5. Core
  6. Utilities

For a full list of the methods that are available in the API, refer to the API reference section.

Table Styling (Theme Creator)

DataTables stylesheet is written in SCSS. Online style builder is built on SCSS with which you can set up base table styling. To deep dive into customization, developers can use SCSS at the code level.

https://datatables.net/

Server-Side Processing

Reading data from DOM and building a table on top of it can be slow when you are dealing with millions of rows. To solve this problem Datatables offers server-side processing of data, where the database engine does heaving lifting instead of a web server or browser.

Set “serverSide” to enable server-side processing and “ajax” to configure options.

Events

Datatables also provide customer DOM events that can be listened to and acted upon. With events, you can listen when Datatable of its extension has performed a particular operation; based on that you can fire a relevant reaction.

Extentions

Extensions enhance Datatables functionalities beyond the base features offered. Extensions add new user interactions and configuration options.

The best way to add extensions is to create a custom package on the datatables.net download page. Along with the base DataTables package, you can include a styling framework (Bootstrap, Foundation, etc, or default styling) and extensions. You can either use files from CDN or download them on the server and install it with package installers like NPM, Bower, Yarn, etc.

You can also download individual extensions from the packages page and install those with a package manager.

Example:

npm install --save datatables.net-dt
npm install --save datatables.net-autofill-dt
npm install --save datatables.net-searchpanes-dt
npm install --save datatables.net-select-dt
npm install --save datatables.net-staterestore-dt

Here we are installing the base DataTables package with AutoFill, SearchPanes, Select and StateRestore extentions.

The simplicity offered by Datatables with its extensibility makes it a very good choice to build data interaction and tables for small to mid-sized web applications.

About Author

Sorry, Comments are closed!