Installation

DataTables is a powerful Javascript library for adding interaction features to HTML tables, and while simplicity is a core design principle for the project as a whole, it can appear quite daunting to get started. However, taking those first steps and getting DataTables running on your web-site is actually quite straight forward as you need only include two additional files in your page:

• The DataTables Javascript file
• The DataTables CSS file

There are other files available such as Editor for adding editing abilities, and other extensions, which can be used to extend the feature set of DataTables, but basically, all you need to do is include these two files to get up and running!

Requirements

Before we get started, we need to consider the requirements DataTables has in order to operate. DataTables is dependency free (as of v3, previously jQuery was required) and does not require any other libraries to be loaded to operate.

HTML

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

<table id="myTable" 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 your HTML document using a server-side program, such as a PHP script, a Ruby script, a C# program or anything else - all they need to do is output your table like this. This is exactly what you would have for a normal HTML table, although sometimes you might need to add the thead and tbody tags, as these aren't always used (they allow DataTables to know what should be used for the column headers and the click-to-order controls).

Note that DataTables can generate the thead and tbody for you, along with all of the rows and cells of the table when loading data from an external source. For more information about the different data sources DataTables can use, please see the data sources section of this manual.

Please also note that while DataTables supports colspan and rowspan in the table's header and footer, they are not supported in the table's tbody and must not be present.

Installing Javascript / CSS

The key part of the installation of DataTables is including the DataTables source files on your page. As noted at the top of this page, this simply involves including the DataTables Javascript and CSS files.

The required files can be installed in a number of different ways:

• With a package manager such as NPM
• Using the DataTables CDN
• Locally (downloaded files)

Regardless of which method you wish to use for your project, installation of DataTables starts [with the download builder]. With it, you can select the parts of the DataTables suite that you wish to install, the styling framework, any dependencies, and which installation you wish to use. It will then give you what you need to install DataTables.

The following is a general overview of each method of installation and how to use DataTables when installed, but use the download builder!

Node.js / NPM

DataTables and its extensions are available as NPM packages. The package base name is datatables.net and the extensions and styling integration options are available as individual packages. Use the download builder to select the packages and extensions you want to use to get a full list of the packages to install.

For example the following can be used to install DataTables with its default styling:

npm install datatables.net-dt

ES modules

For modern Javascript, or if you are using Typescript, use ES modules to load external modules such as DataTables. First install the packages you need, per the instructions above, then import the module in your code:

import DataTable from 'datatables.net-dt';

let table = new DataTable('#myTable', {
    // config options...
});

To install and use extensions, you simply import them and they will automatically register against DataTables. For example to use Responsive:

import DataTable from 'datatables.net-dt';
import 'datatables.net-responsive-dt';

let table = new DataTable('#myTable', {
    responsive: true
});

CommonJS

CommonJS is an older loader type and is very common in the Node.js world (although now being replaced by ES modules). DataTables packages can all operate with CommonJS - e.g.:

var DataTable = require( 'datatables.net' );

let table = new DataTable('#myTable', {
    // config options...
});

Extensions are similar - note that you do not need to assign the require return to a variable. The functionality is automatically added to DataTables:

var DataTable = require( 'datatables.net' );
require( 'datatables.net-responsive' );

let table = new DataTable('#myTable', {
    responsive: true
});

CDN

A CDN is a Content Delivery Network which has edge servers that are tuned to provide media files with very low latency to web-browsers, and as a user receives a file from the CDN the browser will cache it for reuse. This means that different sites using the same Javascript library can share a large performance improvement since the browser does not need to download the same file from different servers for each site.

The DataTables CDN is powered by CloudFlare which has edge servers all around the world, ensuring that the Javascript and CSS for DataTables can be loaded as quickly as possible by your visitor's browsers.

To include DataTables on your page simply include the following HTML:

<link rel="stylesheet" href="https://cdn.datatables.net/3.0.0/css/dataTables.dataTables.css" />
 
<script src="https://cdn.datatables.net/3.0.0/js/dataTables.js"></script>

Local installation

If you prefer not to use a CDN, and instead have the files hosted on your own server, or if you want to modify the files at all, it is just as simple to get going with DataTables.

Simply use the download builder to download the latest version of DataTables, select any additionally software and styling you want and download the customised package. Then unzip and upload to your web-server. You will then have a directory called DataTables available on your server. Then include DataTables on your page using the following HTML:

<link rel="stylesheet" href="/DataTables/datatables.css" />

<script src="/DataTables/datatables.js"></script>

Next steps

Awesome - you've got DataTables installed on your page / app. The next thing to do is to use it! For that, move on to the usage documentation