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

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()DT 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