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
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. |
sum() | Sum the values in a data set. |