DataTables

1. {string|node|jQuery}: jQuery selector or node collection to act on
2. {object}: Optional parameters for modifying the rows to be included
3. {string} [default=none]: Select TR elements that meet the current filter criterion ("applied") or all TR elements (i.e. no filter).
4. {string} [default=current]: Order of the TR elements in the processed array. Can be either 'current', whereby the current sorting of the table is used, or 'original' whereby the original order the data was read into the table is used.
5. {string} [default=all]: Limit the selection to the currently displayed page ("current") or not ("all"). If 'current' is given, then order is assumed to be 'current' and filter is 'applied', regardless of what they might be given as.

   $(document).ready(function() {
     var oTable = $('#example').dataTable();

     // Highlight every second row
     oTable.$('tr:odd').css('backgroundColor', 'blue');
   } );

 
   $(document).ready(function() {
     var oTable = $('#example').dataTable();

     // Filter to rows with 'Webkit' in them, add a background colour and then
     // remove the filter, thus highlighting the 'Webkit' rows only.
     oTable.fnFilter('Webkit');
     oTable.$('tr', {"filter": "applied"}).css('backgroundColor', 'blue');
     oTable.fnFilter('');
   } );

1. {string|node|jQuery}: jQuery selector or node collection to act on
2. {object}: Optional parameters for modifying the rows to be included
3. {string} [default=none]: Select elements that meet the current filter criterion ("applied") or all elements (i.e. no filter).
4. {string} [default=current]: Order of the data in the processed array. Can be either 'current', whereby the current sorting of the table is used, or 'original' whereby the original order the data was read into the table is used.
5. {string} [default=all]: Limit the selection to the currently displayed page ("current") or not ("all"). If 'current' is given, then order is assumed to be 'current' and filter is 'applied', regardless of what they might be given as.

   $(document).ready(function() {
     var oTable = $('#example').dataTable();

     // Get the data from the first row in the table
     var data = oTable._('tr:first');

     // Do something useful with the data
     alert( "First cell is: "+data[0] );
   } );

 
   $(document).ready(function() {
     var oTable = $('#example').dataTable();

     // Filter to 'Webkit' and get all data for 
     oTable.fnFilter('Webkit');
     var data = oTable._('tr', {"filter": "applied"});
     
     // Do something with the data
     alert( data.length+" rows matched the filter" );
   } );

1. {array|object}: The data to be added to the table. This can be:
   • 1D array of data - add a single row with the data provided
   • 2D array of arrays - add multiple rows in a single call
   • object - data object when using mData
   • array of objects - multiple data objects when using mData
2. {bool} [default=true]: redraw the table or not

   // Global var for counter
   var giCount = 2;
   
   $(document).ready(function() {
     $('#example').dataTable();
   } );
   
   function fnClickAddRow() {
     $('#example').dataTable().fnAddData( [
       giCount+".1",
       giCount+".2",
       giCount+".3",
       giCount+".4" ]
     );
       
     giCount++;
   }

1. {boolean} [default=true]: Redraw the table or not, you will typically want to

   $(document).ready(function() {
     var oTable = $('#example').dataTable( {
       "sScrollY": "200px",
       "bPaginate": false
     } );
     
     $(window).bind('resize', function () {
       oTable.fnAdjustColumnSizing();
     } );
   } );

1. {bool} [default=true]: redraw the table or not

   $(document).ready(function() {
     var oTable = $('#example').dataTable();
     
     // Immediately 'nuke' the current rows (perhaps waiting for an Ajax callback...)
     oTable.fnClearTable();
   } );

1. {node}: the table row to 'close'

   $(document).ready(function() {
     var oTable;
     
     // 'open' an information row when a row is clicked on
     $('#example tbody tr').click( function () {
       if ( oTable.fnIsOpen(this) ) {
         oTable.fnClose( this );
       } else {
         oTable.fnOpen( this, "Temporary row opened", "info_row" );
       }
     } );
     
     oTable = $('#example').dataTable();
   } );

1. {mixed}: The index of the row from aoData to be deleted, or the TR element you want to delete
2. {function|null}: Callback function
3. {bool} [default=true]: Redraw the table or not

   $(document).ready(function() {
     var oTable = $('#example').dataTable();
     
     // Immediately remove the first row
     oTable.fnDeleteRow( 0 );
   } );

1. {boolean} [default=false]: Completely remove the table from the DOM

   $(document).ready(function() {
     // This example is fairly pointless in reality, but shows how fnDestroy can be used
     var oTable = $('#example').dataTable();
     oTable.fnDestroy();
   } );

1. {bool} [default=true]: Re-filter and resort (if enabled) the table before the draw.

   $(document).ready(function() {
     var oTable = $('#example').dataTable();
     
     // Re-draw the table - you wouldn't want to do it here, but it's an example :-)
     oTable.fnDraw();
   } );

1. {string}: String to filter the table on
2. {int|null}: Column to limit filtering to
3. {bool} [default=false]: Treat as regular expression or not
4. {bool} [default=true]: Perform smart filtering or not
5. {bool} [default=true]: Show the input global filter in it's input box(es) - please note that this option will not operate with DataTables 1.10+ as it has been removed from the latest versions.
6. {bool} [default=true]: Do case-insensitive matching (true) or not (false)

   $(document).ready(function() {
     var oTable = $('#example').dataTable();
     
     // Sometime later - filter...
     oTable.fnFilter( 'test string' );
   } );

1. {int|node}: A TR row node, TD/TH cell node or an integer. If given as a TR node then the data source for the whole row will be returned. If given as a TD/TH cell node then iCol will be automatically calculated and the data for the cell returned. If given as an integer, then this is treated as the aoData internal data index for the row (see fnGetPosition) and the data for that row used.
2. {int}: Optional column index that you want the data of.

   // Row data
   $(document).ready(function() {
     oTable = $('#example').dataTable();

     oTable.$('tr').click( function () {
       var data = oTable.fnGetData( this );
       // ... do something with the array / object of data for the row
     } );
   } );

 
   // Individual cell data
   $(document).ready(function() {
     oTable = $('#example').dataTable();

     oTable.$('td').click( function () {
       var sData = oTable.fnGetData( this );
       alert( 'The cell clicked on had the value of '+sData );
     } );
   } );

1. {int}: Optional row index for the TR element you want

   $(document).ready(function() {
     var oTable = $('#example').dataTable();
     
     // Get the nodes from the table
     var nNodes = oTable.fnGetNodes( );
   } );

1. {node}: this can either be a TR, TD or TH in the table's body

   $(document).ready(function() {
     $('#example tbody td').click( function () {
       // Get the position of the current data from the node
       var aPos = oTable.fnGetPosition( this );
       
       // Get the data array for this row
       var aData = oTable.fnGetData( aPos[0] );
       
       // Update the data array and return the value
       aData[ aPos[1] ] = 'clicked';
       this.innerHTML = 'clicked';
     } );
     
     // Init DataTables
     oTable = $('#example').dataTable();
   } );

1. {node}: the table row to check

   $(document).ready(function() {
     var oTable;
     
     // 'open' an information row when a row is clicked on
     $('#example tbody tr').click( function () {
       if ( oTable.fnIsOpen(this) ) {
         oTable.fnClose( this );
       } else {
         oTable.fnOpen( this, "Temporary row opened", "info_row" );
       }
     } );
     
     oTable = $('#example').dataTable();
   } );

1. {node}: The table row to 'open'
2. {string|node|jQuery}: The HTML to put into the row
3. {string}: Class to give the new TD cell

   $(document).ready(function() {
     var oTable;
     
     // 'open' an information row when a row is clicked on
     $('#example tbody tr').click( function () {
       if ( oTable.fnIsOpen(this) ) {
         oTable.fnClose( this );
       } else {
         oTable.fnOpen( this, "Temporary row opened", "info_row" );
       }
     } );
     
     oTable = $('#example').dataTable();
   } );

1. {string|int}: Paging action to take: "first", "previous", "next" or "last" or page number to jump to (integer), note that page 0 is the first page.
2. {bool} [default=true]: Redraw the table or not

   $(document).ready(function() {
     var oTable = $('#example').dataTable();
     oTable.fnPageChange( 'next' );
   } );

1. {int}: The column whose display should be changed
2. {bool}: Show (true) or hide (false) the column
3. {bool} [default=true]: Redraw the table or not

   $(document).ready(function() {
     var oTable = $('#example').dataTable();
     
     // Hide the second column after initialisation
     oTable.fnSetColumnVis( 1, false );
   } );

   $(document).ready(function() {
     var oTable = $('#example').dataTable();
     var oSettings = oTable.fnSettings();
     
     // Show an example parameter from the settings
     alert( oSettings._iDisplayStart );
   } );

1. {int}: the data index to sort on. Note that this will not match the 'display index' if you have hidden data entries

   $(document).ready(function() {
     var oTable = $('#example').dataTable();
     
     // Sort immediately with columns 0 and 1
     oTable.fnSort( [ [0,'asc'], [1,'asc'] ] );
   } );

1. {node}: the element to attach the sort listener to
2. {int}: the column that a click on this node will sort on
3. {function}: callback function when sort is run

   $(document).ready(function() {
     var oTable = $('#example').dataTable();
     
     // Sort on column 1, when 'sorter' is clicked on
     oTable.fnSortListener( document.getElementById('sorter'), 1 );
   } );

1. {object|array|string}: Data to update the cell/row with
2. {node|int}: TR element you want to update or the aoData index
3. {int}: The column to update (set to undefined to update the whole row)
4. {bool} [default=true]: Redraw the table or not
5. {bool} [default=true]: Perform pre-draw actions or not

   $(document).ready(function() {
     var oTable = $('#example').dataTable();
     oTable.fnUpdate( 'Example update', 0, 0 ); // Single cell
     oTable.fnUpdate( ['a', 'b', 'c', 'd', 'e'], 1 ); // Row
   } );

1. {string}: Version string to check for, in the format "X.Y.Z". Note that the formats "X" and "X.Y" are also acceptable.

   $(document).ready(function() {
     var oTable = $('#example').dataTable();
     alert( oTable.fnVersionCheck( '1.9.0' ) );
   } );

1. {string}: Version string to check for, in the format "X.Y.Z". Note that the formats "X" and "X.Y" are also acceptable.

   alert( $.fn.dataTable.fnVersionCheck( '1.9.0' ) );

1. {node}: The TABLE node to check if it is a DataTable or not (note that other node types can be passed in, but will always return false).

   var ex = document.getElementById('example');
   if ( ! $.fn.DataTable.fnIsDataTable( ex ) ) {
     $(ex).dataTable();
   }

1. {boolean} [default=false]: Flag to indicate if you want all (default) or visible tables only.

   var table = $.fn.dataTable.fnTables(true);
   if ( table.length > 0 ) {
     $(table).dataTable().fnAdjustColumnSizing();
   }