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. If you are using multiple plug-in methods, ensure that you combine them into a single file to improve performance.
After that, you will be able to initialise the table, and call the function on the resulting object. 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">
$(document).ready(function() {
var table = $('#example').DataTable();
$('#button').click( function () {
alert( 'Column 4 total: '+table.column(4).data().sum() );
} );
} );
</script>
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().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. |
Legacy plug-ins
The following API plug-ins are designed for use with DataTables 1.9 and earlier. Although they will operate with DataTables 1.10, they use the 1.9 style API rather than the new chaining API of 1.10. Also, many of the legacy plug-ins have been integrated directly into DataTables 1.10's core API (for example fnReloadAjax
's functionality is provided by ajax.reload()
now.
Using legacy plug-ins
Usage of the legacy plug-ins is very similar to the above, but note the DataTables constructor uses a lowercase d
.
<script type="text/javascript" src="jquery.dataTables.js"></script>
<script type="text/javascript" src="dataTables.fnGetHiddenNodes.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var table = $('#example').dataTable();
$('#button').click( function () {
var hidden = table.fnGetHiddenNodes();
alert( hidden.length +' nodes were returned' );
} );
} );
</script>
Legacy methods
fnAddDataAndDisplay | Add data and shift the paging to display it immediately |
fnAddTr | Add a `dt-tag tr` element to the table |
fnColumnIndexToVisible | Convert a column data index to a visible index. |
fnDataUpdate | Update DataTables cached data from the DOM |
fnDisplayRow | Shift the table's paging to display a given `dt-tag tr` element |
fnDisplayStart | Change the table's paging display start. |
fnFakeRowspan | Create a rowspan for cells which share data |
fnFilterAll | Apply a common filter to all DataTables on a page |
fnFilterClear | Remove all column and global filters applied to a table |
fnFilterOnReturn | Require the return key to be pressed to filter a table |
fnFindCellRowIndexes | Search for data, returning row indexes |
fnFindCellRowNodes | Search for data, returning row nodes |
fnGetAdjacentTr | Get the adjacent `dt-tag tr` element for a row. |
fnGetColumnData | Get the data from a column |
fnGetColumnIndex | Get the column index by searching the column titles |
fnGetHiddenNodes | Get the `dt-tag tr` elements which are not in the DOM |
fnGetTd | Get the `dt-tag td` element for a cell. |
fnGetTds | Get the `dt-tag td` elements for a row |
fnLengthChange | Change the paging display length |
fnMultiFilter | Apply multiple column filters together |
fnPagingInfo | Get information about the paging state of the table |
fnProcessingIndicator | Show and hide the DataTables processing element through the API. |
fnReloadAjax | Reload the table's data from the Ajax source |
fnSetFilteringDelay | Add a key debouce delay to the global filtering input of a table |
fnSortNeutral | Change ordering of the table to its data load order |
fnStandingRedraw | Redraw the table without altering the paging |
fnVisibleToColumnIndex | Convert a column visible index to a data index. |