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 functions provided by DataTables. While allowing for a fairly extensive range of code interactions, the default API set can be greatly enhanced by making use of the functions provided below, as suitable for your application.
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. 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 fnGetHiddenNodes saved into a file (live example):
<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 oTable = $('#example').dataTable();
$('#button').click( function () {
var nHidden = oTable.fnGetHiddenNodes();
alert( nHidden.length +' nodes were returned' );
} );
} );
</script>
Please note that DataTables will automatically pass the settings object as the first parameter. As such, you do not need to pass the settings object, which you will see if you look at the plug-in API's code.
|
fnAddDataAndDisplay()
Show details |
Add a new row to the table and display it on the screen by jumping the pagination to the required location. This function also returns an object with the added TR element and it's index in aoData such that you could provide an effect (fade for example) to show which row has been added. This function is a drop in replacement for fnAddData with one important exception, it will only take a 1D array, and not 2D (i.e. it will not add multiple rows). |
| Author: | Allan Jardine |
| Code: |
$.fn.dataTableExt.oApi.fnAddDataAndDisplay = function ( oSettings, aData )
{
/* Add the data */
var iAdded = this.oApi._fnAddData( oSettings, aData );
var nAdded = oSettings.aoData[ iAdded ].nTr;
/* Need to re-filter and re-sort the table to get positioning correct, not perfect
* as this will actually redraw the table on screen, but the update should be so fast (and
* possibly not alter what is already on display) that the user will not notice
*/
this.oApi._fnReDraw( oSettings );
/* Find it's position in the table */
var iPos = -1;
for( var i=0, iLen=oSettings.aiDisplay.length ; i<iLen ; i++ )
{
if( oSettings.aoData[ oSettings.aiDisplay[i] ].nTr == nAdded )
{
iPos = i;
break;
}
}
/* Get starting point, taking account of paging */
if( iPos >= 0 )
{
oSettings._iDisplayStart = ( Math.floor(i / oSettings._iDisplayLength) ) * oSettings._iDisplayLength;
this.oApi._fnCalculateEnd( oSettings );
}
this.oApi._fnDraw( oSettings );
return {
"nTr": nAdded,
"iPos": iAdded
};
}
/* Example use */
var oTable;
$(document).ready(function() {
oTable = $('#example').dataTable();
oTable.fnAddDataAndDisplay( [ 1, 2, 3, 4, 5 /* ... */ ] );
} );
|
|
fnAddTr()
Show details |
Take a TR element and add it to a DataTables table. Useful for maintaining custom classes and other attributes. |
| Author: | Allan Jardine |
| Code: |
/*
* Function: fnAddTr
* Purpose: Add a TR element to a table
* Returns: -
* Inputs: object:oSettings - automatically passed by DataTables
* node:nTr - TR element to add to table
* bool:bRedraw - optional - should the table redraw - default true.
* Usage: var row = '<tr class="gradeX"><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>';
oTable.fnAddTr( $(row)[0] );
*/
$.fn.dataTableExt.oApi.fnAddTr = function ( oSettings, nTr, bRedraw ) {
if ( typeof bRedraw == 'undefined' )
{
bRedraw = true;
}
var nTds = nTr.getElementsByTagName('td');
if ( nTds.length != oSettings.aoColumns.length )
{
alert( 'Warning: not adding new TR - columns and TD elements must match' );
return;
}
var aData = [];
for ( var i=0 ; i<nTds.length ; i++ )
{
aData.push( nTds[i].innerHTML );
}
/* Add the data and then replace DataTable's generated TR with ours */
var iIndex = this.oApi._fnAddData( oSettings, aData );
oSettings.aoData[ iIndex ].nTr = nTr;
oSettings.aiDisplay = oSettings.aiDisplayMaster.slice();
if ( bRedraw )
{
this.oApi._fnReDraw( oSettings );
}
}
|
|
fnColumnIndexToVisible()
Show details |
When DataTables removes columns from the display (bVisible or fnSetColumnVis) it removes these elements from the DOM, effecting the index value for the column positions. This function converts the data column index (i.e. all columns regardless of visibility) into a visible column index. |
| Author: | Allan Jardine |
| Code: |
$.fn.dataTableExt.oApi.fnColumnIndexToVisible = function ( oSettings, iMatch )
{
return oSettings.oApi._fnColumnIndexToVisible( oSettings, iMatch );
}
|
|
fnDisplayStart()
Show details |
Set the point at which DataTables will start it's display of data in the table. |
| Author: | Allan Jardine |
| Code: |
/*
* Function: fnDisplayStart
* Purpose: Set the display start point
* Returns: void
* Inputs: object:oSettings - DataTables settings object - NOTE - added automatically
* int:iStart - New display start point
* bool:bRedraw - Redraw the display based on new start point - optional - default true
*/
$.fn.dataTableExt.oApi.fnDisplayStart = function ( oSettings, iStart, bRedraw )
{
if ( typeof bRedraw == 'undefined' )
{
bRedraw = true;
}
oSettings._iDisplayStart = iStart;
oSettings.oApi._fnCalculateEnd( oSettings );
if ( bRedraw )
{
oSettings.oApi._fnDraw( oSettings );
}
}
|
|
fnDisplayRow()
Show details |
Take a TR element and alter the table's paging to show the TR in question. |
| Author: | Allan Jardine |
| Code: |
$.fn.dataTableExt.oApi.fnDisplayRow = function ( oSettings, nRow )
{
var iPos = -1;
for( var i=0, iLen=oSettings.aiDisplay.length ; i<iLen ; i++ )
{
if( oSettings.aoData[ oSettings.aiDisplay[i] ].nTr == nRow )
{
iPos = i;
break;
}
}
if( iPos >= 0 )
{
oSettings._iDisplayStart = ( Math.floor(i / oSettings._iDisplayLength) ) * oSettings._iDisplayLength;
this.oApi._fnCalculateEnd( oSettings );
}
this.oApi._fnDraw( oSettings );
}
/* Example use */
var oTable;
$(document).ready(function() {
oTable = $('#example').dataTable();
oTable.fnDisplayRow( oTable.fnGetNodes()[20] );
} );
|
|
fnFilterAll()
Show details |
Apply the same filter to all DataTable instances on a particular page. The function call exactly matches that used by fnFilter() so regular expression and individual column sorting can be used. |
| Author: | Kristoffer Karlström |
| Code: |
$.fn.dataTableExt.oApi.fnFilterAll = function(oSettings, sInput, iColumn, bRegex, bSmart) {
if ( typeof bRegex == 'undefined' ) {
bRegex = false;
}
if ( typeof bSmart == 'undefined' ) {
bSmart = true;
}
for (var i in this.dataTableSettings) {
jQuery.fn.dataTableExt.iApiIndex = i;
this.fnFilter(sInput, iColumn, bRegex, bSmart);
}
jQuery.fn.dataTableExt.iApiIndex = 0;
}
/* Example usage */
var oTable;
$(document).ready(function() {
oTable = $(".dataTable").dataTable();
$("#search").keyup( function () {
/* Filter on the column (the index) of this element */
oTable.fnFilterAll(this.value);
} );
});
|
|
fnFilterClear()
Show details |
Remove all filtering that has been applied to a DataTable, be it column based filtering or global filtering. |
| Author: | Allan Jardine |
| Code: |
$.fn.dataTableExt.oApi.fnFilterClear = function ( oSettings )
{
/* Remove global filter */
oSettings.oPreviousSearch.sSearch = "";
/* Remove the text of the global filter in the input boxes */
if ( typeof oSettings.aanFeatures.f != 'undefined' )
{
var n = oSettings.aanFeatures.f;
for ( var i=0, iLen=n.length ; i<iLen ; i++ )
{
$('input', n[i]).val( '' );
}
}
/* Remove the search text for the column filters - NOTE - if you have input boxes for these
* filters, these will need to be reset
*/
for ( var i=0, iLen=oSettings.aoPreSearchCols.length ; i<iLen ; i++ )
{
oSettings.aoPreSearchCols[i].sSearch = "";
}
/* Redraw */
oSettings.oApi._fnReDraw( oSettings );
}
/* Example usage */
$(document).ready(function() {
var oTable = $('#example').dataTable();
/* Perform a filter */
oTable.fnFilter('Win');
oTable.fnFilter('Trident', 0);
/* Remove all filtering */
oTable.fnFilterClear();
} );
|
|
fnFilterOnReturn()
Show details |
This plug-in removed the default behaviour of DataTables to filter on each keypress, and replaces with it the requirement to press the enter key to perform the filter. |
| Author: | Jon Ranes |
| Code: |
jQuery.fn.dataTableExt.oApi.fnFilterOnReturn = function (oSettings) {
/*
* Usage: $('#example').dataTable().fnFilterOnReturn();
* Author: Jon Ranes (www.mvccms.com)
* License: GPL v2 or BSD 3 point style
* Contact: jranes /AT\ mvccms.com
*/
var _that = this;
this.each(function (i) {
$.fn.dataTableExt.iApiIndex = i;
var $this = this;
var anControl = $('input', _that.fnSettings().aanFeatures.f);
anControl.unbind('keyup').bind('keypress', function (e) {
if (e.which == 13) {
$.fn.dataTableExt.iApiIndex = i;
_that.fnFilter(anControl.val());
}
});
return this;
});
return this;
}
/* Example call */
$(document).ready(function() {
$('.dataTable').dataTable().fnFilterOnReturn();
} );
|
|
fnFindCellRowIndexes()
Show details |
Search through a table looking for a given string (optionally the search can be restricted to a single column). The return value is an array with the data indexes (from DataTables' internal data store) for any rows which match. |
| Author: | Allan Jardine |
| Code: |
$.fn.dataTableExt.oApi.fnFindCellRowIndexes = function ( oSettings, sSearch, iColumn )
{
var
i,iLen, j, jLen,
aOut = [], aData;
for ( i=0, iLen=oSettings.aoData.length ; i<iLen ; i++ )
{
aData = oSettings.aoData[i]._aData;
if ( typeof iColumn == 'undefined' )
{
for ( j=0, jLen=aData.length ; j<jLen ; j++ )
{
if ( aData[j] == sSearch )
{
aOut.push( i );
}
}
}
else if ( aData[iColumn] == sSearch )
{
aOut.push( i );
}
}
return aOut;
}
/* Example use */
var oTable, a;
$(document).ready(function() {
oTable = $('#example').dataTable();
a = oTable.fnFindCellRowIndexes( '1.7' ); /* Search all columns */
a = oTable.fnFindCellRowIndexes( '1.7', 3 ); /* Seach only column 3 */
} );
|
|
fnFindCellRowNodes()
Show details |
Much like fnFindCellRowIndexes this plug-in will search a table for matching data (optionally the search can be restricted to a single column), but in this case the returned array contains TR nodes of the matching rows, rather than data indexes. |
| Author: | Allan Jardine |
| Code: |
$.fn.dataTableExt.oApi.fnFindCellRowNodes = function ( oSettings, sSearch, iColumn )
{
var
i,iLen, j, jLen,
aOut = [], aData;
for ( i=0, iLen=oSettings.aoData.length ; i<iLen ; i++ )
{
aData = oSettings.aoData[i]._aData;
if ( typeof iColumn == 'undefined' )
{
for ( j=0, jLen=aData.length ; j<jLen ; j++ )
{
if ( aData[j] == sSearch )
{
aOut.push( oSettings.aoData[i].nTr );
}
}
}
else if ( aData[iColumn] == sSearch )
{
aOut.push( oSettings.aoData[i].nTr );
}
}
return aOut;
}
/* Example use */
var oTable, a;
$(document).ready(function() {
oTable = $('#example').dataTable();
a = oTable.fnFindCellRowNodes( '1.7' ); /* Search all columns */
a = oTable.fnFindCellRowNodes( '1.7', 3 ); /* Seach only column 3 */
} );
|
|
fnGetAdjacentTr()
Show details |
Due to the fact that DataTables moves DOM elements around (mainly TR elements for sorting and filtering) it can at times be a little tricky to get the next row based on another, while taking into account pagination, filtering, sorting etc. This function is designed to address exactly this situation. It takes two parameters, the target node, and a boolean indicating if the adjacent row retrieved should be the next (true, or no value) or the previous (false). |
| Author: | Allan Jardine |
| Code: |
$.fn.dataTableExt.oApi.fnGetAdjacentTr = function ( oSettings, nTr, bNext )
{
/* Find the node's position in the aoData store */
var iCurrent = oSettings.oApi._fnNodeToDataIndex( oSettings, nTr );
/* Convert that to a position in the display array */
var iDisplayIndex = $.inArray( iCurrent, oSettings.aiDisplay );
if ( iDisplayIndex == -1 )
{
/* Not in the current display */
return null;
}
/* Move along the display array as needed */
iDisplayIndex += (typeof bNext=='undefined' || bNext) ? 1 : -1;
/* Check that it within bounds */
if ( iDisplayIndex < 0 || iDisplayIndex >= oSettings.aiDisplay.length )
{
/* There is no next/previous element */
return null;
}
/* Return the target node from the aoData store */
return oSettings.aoData[ oSettings.aiDisplay[ iDisplayIndex ] ].nTr;
}
/* Example usage */
$(document).ready(function() {
var oTable = $('#example').dataTable();
var n1 = $('#example tbody tr:eq(2)')[0];
var nNext = oTable.fnGetAdjacentTr( n1 );
var nPrev = oTable.fnGetAdjacentTr( n1, false );
} );
|
|
fnGetColumnIndex()
Show details |
Maintenance of web-sites can often cause unexpected headaches, particularly if the hardcoded index of an array (the columns in a DataTables instance) needs to change due to an added or removed column. This plug-in function will match a given string to the title of a column in the table and return the column index, helping to overcome this problem. |
| Author: | Michael Ross |
| Code: |
/*
* Function: fnGetColumnIndex
* Purpose: Return an integer matching the column index of passed in string representing sTitle
* Returns: int:x - column index, or -1 if not found
* Inputs: object:oSettings - automatically added by DataTables
* string:sCol - required - string matching the sTitle value of a table column
*/
$.fn.dataTableExt.oApi.fnGetColumnIndex = function ( oSettings, sCol )
{
var cols = oSettings.aoColumns;
for ( var x=0, xLen=cols.length ; x<xLen ; x++ )
{
if ( cols[x].sTitle.toLowerCase() == sCol.toLowerCase() )
{
return x;
};
}
return -1;
}
|
|
fnGetDisplayNodes()
Show details |
Get a list of all TR nodes in the table which are available (visible) after filtering. |
| Author: | Sara Talley |
| Code: |
/*
* Function: fnGetDisplayNodes
* Purpose: Return an array with the TR nodes used for displaying the table
* Returns: array node: TR elements
* or
* node (if iRow specified)
* Inputs: object:oSettings - automatically added by DataTables
* int:iRow - optional - if present then the array returned will be the node for
* the row with the index 'iRow'
*/
$.fn.dataTableExt.oApi.fnGetDisplayNodes = function ( oSettings, iRow )
{
var anRows = [];
if ( oSettings.aiDisplay.length !== 0 )
{
if ( typeof iRow != 'undefined' )
{
return oSettings.aoData[ oSettings.aiDisplay[iRow] ].nTr;
}
else
{
for ( var j=oSettings._iDisplayStart ; j<oSettings._iDisplayEnd ; j++ )
{
var nRow = oSettings.aoData[ oSettings.aiDisplay[j] ].nTr;
anRows.push( nRow );
}
}
}
return anRows;
};
|
|
fnGetFilteredNodes()
Show details |
Retrieve an array with all TR nodes after filtering. Returned in the current sorting order. |
| Author: | Allan Jardine |
| Code: |
$.fn.dataTableExt.oApi.fnGetFilteredNodes = function ( oSettings )
{
var anRows = [];
for ( var i=0, iLen=oSettings.aiDisplay.length ; i<iLen ; i++ )
{
var nRow = oSettings.aoData[ oSettings.aiDisplay[i] ].nTr;
anRows.push( nRow );
}
return anRows;
};
|
|
fnGetHiddenNodes()
Show details |
Get a list of all TR nodes in the table which are not currently visible (useful for building forms). |
| Author: | Allan Jardine |
| Code: |
$.fn.dataTableExt.oApi.fnGetHiddenNodes = function ( oSettings )
{
/* Note the use of a DataTables 'private' function thought the 'oApi' object */
var anNodes = this.oApi._fnGetTrNodes( oSettings );
var anDisplay = $('tbody tr', oSettings.nTable);
/* Remove nodes which are being displayed */
for ( var i=0 ; i<anDisplay.length ; i++ )
{
var iIndex = jQuery.inArray( anDisplay[i], anNodes );
if ( iIndex != -1 )
{
anNodes.splice( iIndex, 1 );
}
}
/* Fire back the array to the caller */
return anNodes;
}
|
|
fnGetTd()
Show details |
Get a TD node from DataTables. While getting a TD node is easy when it is visible on the page by using normal DOM methods, jQuery or whatever, it becomes a lot more complicated when taking into account hidden rows and columns. This function can be used to overcome these difficulties. |
| Author: | Allan Jardine |
| Code: |
/*
* Function: $().dataTable().fnGetTd
* Purpose: Get a TD node from a row, taking into account column visibility
* Returns: node: - TD element
* Inputs: mixed:mTr -
* node: - TR element to get the TD child from
* int: - aoData index
* int:iTd - TD node index to get
* bool:bVisOnly - optional - if true then only visible columns are counted for the iTd
* parameter. If not given or false then both hidden and visible columns will be used
*/
$.fn.dataTableExt.oApi.fnGetTd = function ( oSettings, mTr, iTd, bVisOnly )
{
/* Take either a TR node or aoData index as the mTr property */
var iRow = (typeof mTr == 'object') ?
oSettings.oApi._fnNodeToDataIndex(oSettings, mTr) : mTr;
if ( typeof bVisOnly == 'undefined' && !bVisOnly )
{
/* Looking at both visible and hidden TD elements - convert to visible index, if not present
* then it must be hidden. Return as appropriate
*/
var iCalcVis = oSettings.oApi._fnColumnIndexToVisible( oSettings, iTd );
if ( iCalcVis !== null )
{
return oSettings.aoData[ iRow ].nTr.getElementsByTagName('td')[ iCalcVis ];
}
else
{
return oSettings.aoData[ iRow ]._anHidden[ iTd ];
}
}
else
{
/* Only looking at visible TD elements, so just use getElements... */
return oSettings.aoData[ iRow ].nTr.getElementsByTagName('td')[ iTd ];
}
}
/* Example usage */
$(document).ready(function() {
var oTable = $('#example').dataTable();
/* Sort in the order that was origially in the HTML */
var nTd = oTable.fnGetTd( $('#example tbody tr:eq(1)')[0], 1 );
console.log( nTd );
} );
|
|
fnGetTds()
Show details |
Get an array of TD nodes from DataTables for a given row, including any column elements which are hidden. |
| Author: | Allan Jardine |
| Code: |
/*
* Function: $().dataTable().fnGetTds
* Purpose: Get an array of TD nodes from a row, taking into account column visibility
* Returns: node: - TD element
* Inputs: mixed:mTr -
* node: - TR element to get the TD child from
* int: - aoData index
*/
$.fn.dataTableExt.oApi.fnGetTds = function ( oSettings, mTr )
{
var anTds = [];
var anVisibleTds = [];
var iCorrector = 0;
var nTd, iColumn, iColumns;
/* Take either a TR node or aoData index as the mTr property */
var iRow = (typeof mTr == 'object') ?
oSettings.oApi._fnNodeToDataIndex(oSettings, mTr) : mTr;
var nTr = oSettings.aoData[iRow].nTr;
/* Get an array of the visible TD elements */
for ( iColumn=0, iColumns=nTr.childNodes.length ; iColumn<iColumns ; iColumn++ )
{
nTd = nTr.childNodes[iColumn];
if ( nTd.nodeName.toUpperCase() == "TD" )
{
anVisibleTds.push( nTd );
}
}
/* Construct and array of the combined elements */
for ( iColumn=0, iColumns=oSettings.aoColumns.length ; iColumn<iColumns ; iColumn++ )
{
if ( oSettings.aoColumns[iColumn].bVisible )
{
anTds.push( anVisibleTds[iColumn-iCorrector] );
}
else
{
anTds.push( oSettings.aoData[iRow]._anHidden[iColumn] );
iCorrector++;
}
}
return anTds;
}
/* Example usage */
$(document).ready(function() {
var oTable = $('#example').dataTable();
/* Sort in the order that was origially in the HTML */
var anTds = oTable.fnGetTds( $('#example tbody tr:eq(1)')[0] );
console.log( anTds );
} );
|
|
fnPagingInfo()
Show details |
Get information about the paging settings that DataTables is currently using to display each page, including the number of records shown, start and end points in the data set etc. |
| Author: | Allan Jardine |
| Code: |
$.fn.dataTableExt.oApi.fnPagingInfo = function ( oSettings )
{
return {
"iStart": oSettings._iDisplayStart,
"iEnd": oSettings.fnDisplayEnd(),
"iLength": oSettings._iDisplayLength,
"iTotal": oSettings.fnRecordsTotal(),
"iFilteredTotal": oSettings.fnRecordsDisplay(),
"iPage": Math.ceil( oSettings._iDisplayStart / oSettings._iDisplayLength ),
"iTotalPages": Math.ceil( oSettings.fnRecordsDisplay() / oSettings._iDisplayLength )
};
}
/* Example usage */
$(document).ready(function() {
$('#example').dataTable( {
"fnDrawCallback": function () {
alert( 'Now on page'+ this.fnPagingInfo().iPage );
}
} );
} );
|
|
fnLengthChange()
Show details |
Change the number of records that can be viewed on a single page in DataTables. |
| Author: | Pedro Alves |
| Code: |
/*
* Function: fnLengthChange
* Purpose: Change the number of records on display
* Returns: array:
* Inputs: object:oSettings - DataTables settings object
* int:iDisplay - New display length
*/
$.fn.dataTableExt.oApi.fnLengthChange = function ( oSettings, iDisplay )
{
oSettings._iDisplayLength = iDisplay;
oSettings.oApi._fnCalculateEnd( oSettings );
/* If we have space to show extra rows (backing up from the end point - then do so */
if ( oSettings._iDisplayEnd == oSettings.aiDisplay.length )
{
oSettings._iDisplayStart = oSettings._iDisplayEnd - oSettings._iDisplayLength;
if ( oSettings._iDisplayStart < 0 )
{
oSettings._iDisplayStart = 0;
}
}
if ( oSettings._iDisplayLength == -1 )
{
oSettings._iDisplayStart = 0;
}
oSettings.oApi._fnDraw( oSettings );
$('select', oSettings.aanFeatures.l).val( iDisplay );
}
/* Example */
$(document).ready(function() {
var oTable = $('#example').dataTable();
oTable.fnLengthChange( 100 );
} );
|
|
fnReloadAjax()
Show details |
By default DataTables only uses the sAjaxSource variable at initialisation time, however it can be useful to re-read an Ajax source and have the table update. Typically you would need to use the fnClearTable() and fnAddData() functions, however this wraps it all up in a single function call. Note: To reload data when using server-side processing, just use the built-in API function fnDraw rather than this plug-in. |
| Author: | Allan Jardine |
| Code: |
$.fn.dataTableExt.oApi.fnReloadAjax = function ( oSettings, sNewSource, fnCallback, bStandingRedraw )
{
if ( typeof sNewSource != 'undefined' && sNewSource != null )
{
oSettings.sAjaxSource = sNewSource;
}
this.oApi._fnProcessingDisplay( oSettings, true );
var that = this;
var iStart = oSettings._iDisplayStart;
oSettings.fnServerData( oSettings.sAjaxSource, [], function(json) {
/* Clear the old information from the table */
that.oApi._fnClearTable( oSettings );
/* Got the data - add it to the table */
var aData = (oSettings.sAjaxDataProp !== "") ?
that.oApi._fnGetObjectDataFn( oSettings.sAjaxDataProp )( json ) : json;
for ( var i=0 ; i<aData.length ; i++ )
{
that.oApi._fnAddData( oSettings, aData[i] );
}
oSettings.aiDisplay = oSettings.aiDisplayMaster.slice();
that.fnDraw();
if ( typeof bStandingRedraw != 'undefined' && bStandingRedraw === true )
{
oSettings._iDisplayStart = iStart;
that.fnDraw( false );
}
that.oApi._fnProcessingDisplay( oSettings, false );
/* Callback user function - for event handlers etc */
if ( typeof fnCallback == 'function' && fnCallback != null )
{
fnCallback( oSettings );
}
}, oSettings );
}
/* Example call to load a new file */
oTable.fnReloadAjax( 'media/examples_support/json_source2.txt' );
/* Example call to reload from original file */
oTable.fnReloadAjax();
|
|
fnSetFilteringDelay()
Show details |
Enables filtration delay for keeping the browser more responsive while searching for a longer keyword. |
| Author: | Zygimantas Berziunas, Allan Jardine and vex |
| Code: |
jQuery.fn.dataTableExt.oApi.fnSetFilteringDelay = function ( oSettings, iDelay ) {
/*
* Inputs: object:oSettings - dataTables settings object - automatically given
* integer:iDelay - delay in milliseconds
* Usage: $('#example').dataTable().fnSetFilteringDelay(250);
* Author: Zygimantas Berziunas (www.zygimantas.com) and Allan Jardine
* License: GPL v2 or BSD 3 point style
* Contact: zygimantas.berziunas /AT\ hotmail.com
*/
var
_that = this,
iDelay = (typeof iDelay == 'undefined') ? 250 : iDelay;
this.each( function ( i ) {
$.fn.dataTableExt.iApiIndex = i;
var
$this = this,
oTimerId = null,
sPreviousSearch = null,
anControl = $( 'input', _that.fnSettings().aanFeatures.f );
anControl.unbind( 'keyup' ).bind( 'keyup', function() {
var $$this = $this;
if (sPreviousSearch === null || sPreviousSearch != anControl.val()) {
window.clearTimeout(oTimerId);
sPreviousSearch = anControl.val();
oTimerId = window.setTimeout(function() {
$.fn.dataTableExt.iApiIndex = i;
_that.fnFilter( anControl.val() );
}, iDelay);
}
});
return this;
} );
return this;
}
/* Example call */
$(document).ready(function() {
$('.dataTable').dataTable().fnSetFilteringDelay();
} );
|
|
fnSortNeutral()
Show details |
This function will restore the order in which data was read into a DataTable (for example from an HTML source). Although you can set aaSorting to be an empty array ([ ]) in order to prevent sorting during initialisation, it can sometimes be useful to restore the original order after sorting has already occurred - which is exactly what this function does. |
| Author: | Allan Jardine |
| Code: |
$.fn.dataTableExt.oApi.fnSortNeutral = function ( oSettings )
{
/* Remove any current sorting */
oSettings.aaSorting = [];
/* Sort display arrays so we get them in numerical order */
oSettings.aiDisplay.sort( function (x,y) {
return x-y;
} );
oSettings.aiDisplayMaster.sort( function (x,y) {
return x-y;
} );
/* Redraw */
oSettings.oApi._fnReDraw( oSettings );
}
/* Example usage */
$(document).ready(function() {
var oTable = $('#example').dataTable();
/* Sort in the order that was origially in the HTML */
oTable.fnSortNeutral();
} );
|
|
fnVisibleToColumnIndex()
Show details |
When DataTables removes columns from the display (bVisible or fnSetColumnVis) it removes these elements from the DOM, effecting the index value for the column positions. This function converts the visible column index into a data column index (i.e. all columns regardless of visibility). |
| Author: | Allan Jardine |
| Code: |
$.fn.dataTableExt.oApi.fnVisibleToColumnIndex = function ( oSettings, iMatch )
{
return oSettings.oApi._fnVisibleToColumnIndex( oSettings, iMatch );
}
|
Note that all contributed code is copyright to the original author, unless otherwise stated.