API plug-ins

One of the most common interactions with DataTables for a developer (other than initialisation of the table of course!) is to make use of the API methods provided. While allowing for an extensive range of code interactions, the default API can be greatly enhanced by making use of the functions provided below, as suitable for your application.

How to use

To make use of one of the plug-in API functions below, you simply need to include it in the Javascript available for your page, after you load the DataTables library, but before you initialise the DataTable.

Browser

Loading API plug-ins directly in the browser is just a case of loading the Javascript for the plug-in. As an example the code below makes use of sum() saved into a file):

<script type="text/javascript" src="jquery.dataTables.js"></script>
<script type="text/javascript" src="sum().js"></script>
<script type="text/javascript">
    var table = new DataTable('#myTable');

    document
        .getElementById('button')
        .addEventListener('click', function () {
            alert('Column 4 total: ' + table.column(4).data().sum());
        });

    // or jQuery style:
    var table = $('#example').DataTable();

    $('#button').on('click', function () {
        alert('Column 4 total: ' + table.column(4).data().sum());
    });
</script>

Plug-ins which can be included in the browser are available on our CDN. See the details page for each plug-in for the full CDN URL.

ES modules

The API plug-ins are also available as ES modules, which can be loaded from the datatables.net-plugins package (.mjs files). You need to include the file required for the plug-in. Below we use the example of sum() again:

import DataTable from 'datatables.net';
import 'datatables.net-plugins/api/sum().mjs';

var table = new DataTable('#myTable');

document
    .getElementById('button')
    .addEventListener('click', function () {
        alert('Column 4 total: ' + table.column(4).data().sum());
    });

CommonJS

If you are using CommonJS (i.e. in an older version of Node or Webpack), the .js files can be loaded in, and it will automatically add the plug-in to DataTables. As with DataTables core and the extensions, the CommonJS loader provides a function that you need to call with the window and $/jQuery objects - e.g.:

var $ = require('jquery');
var DataTable = require('datatables.net')(window, $);
require('datatables.net-plugins/api/sum().js')(window, $);

More info

For more information on using the DataTables API, please refer to the API section of the manual. Additionally, a live example of an API plug-in being used is available in the examples section.

Plug-in methods

sum()	Sum the values in a data set.
average()	Average the values in a data set.
column().searchable()	Apply multi-column ordering through the columns() API method.
column().title()	Get the title of a column
columns().order()	Apply multi-column ordering through the columns() API method.
order.neutral()	Change ordering of the table to its data load order
page.jumpToData()	Jump to a page by searching for data from a column
processing()	Show / hide the processing indicator via the API
row().show()	See the row in datable by display the right pagination page
rows().generate()	Create tr elements for rows which have not yet had their nodes created.