Converting parameter names for 1.10
DataTables 1.10 introduces the use of camelCase notation rather than the old Hungarian notation style that was used in v1.9 and earlier. The new API also follows this new naming scheme.
The change is fully backwards compatible and you can continue to use the old versions of the parameter names and API methods as you were before. However, if you wish to update your use of the parameters and API methods to the new way, use the following tables to map between the two parameter name forms. Most of them are straightforward conversions from Hungarian to camelCase, but a few have also been renamed in the new options and API for naming consistency.
Initialisation
A DataTable can now be created using:
$(...).dataTable()
- creates a DataTable and returns a jQuery object (this is the 1.9- style)$(...).DataTable()
- creates a DataTable and returns a new DataTables API instance
Both methods are available in DataTables 1.10+.
Options
Hungarian | camelCase | Meaning |
---|---|---|
aaData |
data |
Data to use as the display data for the table. |
aaSorting |
order |
Initial order (sort) to apply to the table |
aaSortingFixed |
orderFixed |
Ordering to always be applied to the table |
aDataSort |
columns.orderData |
Define multiple column ordering as the default order for a column |
aLengthMenu |
lengthMenu |
Change the options in the page length select list. |
aTargets |
columnDefs.targets |
Specify the columns that the column definition should apply to. |
aoColumns |
columns |
Column configuration array. |
aoColumnDefs |
columnDefs |
Column definitions configuration array. |
aoSearchCols |
searchCols |
Define an initial search for individual columns. |
asSorting |
columns.orderSequence |
Order direction application sequence |
asStripeClasses |
stripeClasses |
Set the zebra stripe class names for the rows in the table. |
bAutoWidth |
autoWidth |
Feature control DataTables' smart column width handling |
bDeferRender |
deferRender |
Feature control deferred rendering for additional speed of initialisation. |
bDestroy |
destroy |
Destroy any existing table matching the selector and replace with the new options. |
bFilter |
searching |
Feature control search (filtering) abilities |
bInfo |
info |
Feature control table information display field |
bJQueryUI |
jQueryUI |
Use markup and classes for the table to be themed by jQuery UI ThemeRoller. |
bLengthChange |
lengthChange |
Feature control the end user's ability to change the paging display length of the table. |
bPaginate |
paging |
Enable or disable table pagination. |
bProcessing |
processing |
Feature control the processing indicator. |
bRetrieve |
retrieve |
Retrieve an existing DataTables instance |
bScrollAutoCss |
Removed | |
bScrollCollapse |
scrollCollapse |
Allow the table to reduce in height when a limited number of rows are shown. |
bScrollInfinite |
Removed | |
bSearchable |
columns.searchable |
Enable or disable filtering on the data in this column |
bServerSide |
serverSide |
Feature control DataTables' server-side processing mode. |
bSort |
ordering |
Feature control ordering (sorting) abilities in DataTables. |
bSortable |
columns.orderable |
Enable or disable ordering on this column |
bSortCellsTop |
orderCellsTop |
Control which cell the order event handler will be applied to in a column |
bSortClasses |
orderClasses |
Highlight the columns being ordered in the table's body |
bStateSave |
stateSave |
State saving - restore table state on page reload |
bUseRendered |
Removed | Use columns.render |
bVisible |
columns.visible |
Enable or disable the display of this column |
fnCookieCallback |
Removed | |
fnCreatedCell |
columns.createdCell |
Cell created callback to allow DOM manipulation |
fnCreatedRow |
createdRow |
Callback for whenever a TR element is created for the table's body. |
fnDrawCallback |
drawCallback |
Function that is called every time DataTables performs a draw. |
fnFooterCallback |
footerCallback |
Footer display callback function. |
fnFormatNumber |
formatNumber |
Number formatting callback function. |
fnHeaderCallback |
headerCallback |
Header display callback function. |
fnInfoCallback |
infoCallback |
Table summary information display callback. |
fnInitComplete |
initComplete |
Initialisation complete callback. |
fnPreDrawCallback |
preDrawCallback |
Pre-draw callback. |
fnRender |
Removed | Use columns.render |
fnRowCallback |
rowCallback |
Row draw callback. |
fnServerData |
ajax |
Load data for the table's content from an Ajax source |
fnServerParams |
ajax |
Load data for the table's content from an Ajax source |
fnStateLoad |
stateLoadCallback |
Callback that defines where and how a saved state should be loaded |
fnStateLoaded |
stateLoaded |
State loaded callback. |
fnStateLoadParams |
stateLoadParams |
State loaded - data manipulation callback |
fnStateSave |
stateSaveCallback |
Callback that defines how the table state is stored and where |
fnStateSaveParams |
stateSaveParams |
State save - data manipulation callback |
iCookieDuration |
stateDuration |
Saved state validity duration |
iDataSort |
columns.orderData |
Define multiple column ordering as the default order for a column |
iDeferLoading |
deferLoading |
Delay the loading of server-side data until second draw |
iDisplayLength |
pageLength |
Change the initial page length (number of rows per page) |
iDisplayStart |
displayStart |
Initial paging start point |
iScrollLoadGap |
Removed | |
iTabIndex |
tabIndex |
Tab index control for keyboard navigation |
mData |
columns.data |
Set the data source for the column from the rows data object / array |
mRender |
columns.render |
Render (process) the data for use in the table |
oLanguage .oAria.sSortAscending |
language.aria.sortAscending |
Language strings used for WAI-ARIA specific attributes |
oLanguage .oAria.sSortDescending |
language.aria.sortDescending |
Language strings used for WAI-ARIA specific attributes |
oLanguage .oPaginate.sFirst |
language.paginate.first |
Pagination 'first' button string |
oLanguage .oPaginate.sLast |
language.paginate.last |
Pagination 'last' button string |
oLanguage .oPaginate.sNext |
language.paginate.next |
Pagination 'next' button string |
oLanguage .oPaginate.sPrevious |
language.paginate.previous |
Pagination 'previous' button string |
oLanguage .sEmptyTable |
language.emptyTable |
Table has no records string |
oLanguage .sInfo |
language.info |
Table summary information display string |
oLanguage .sInfoEmpty |
language.infoEmpty |
Table summary information string used when the table is empty or records |
oLanguage .sInfoFiltered |
language.infoFiltered |
Appended string to the summary information when the table is filtered |
oLanguage .sInfoPostFix |
language.infoPostFix |
String to append to all other summary information strings |
oLanguage .sInfoThousands |
language.thousands |
Thousands separator |
oLanguage .sLengthMenu |
language.lengthMenu |
Page length options string |
oLanguage .sLoadingRecords |
language.loadingRecords |
Loading information display string - shown when Ajax loading data |
oLanguage .sProcessing |
language.processing |
Processing indicator string |
oLanguage .sSearch |
language.search |
Search input string |
oLanguage .sUrl |
language.url |
Load language information from remote file |
oLanguage .sZeroRecords |
language.zeroRecords |
Table empty as a result of filtering string |
oSearch |
search |
Set an initial filter in DataTables and / or filtering options. |
sAjaxDataProp |
ajax.dataSrc |
Data property or manipulation method for table data |
sAjaxSource |
ajax |
Load data for the table's content from an Ajax source |
sCellType |
columns.cellType |
Cell type to be created for a column |
sClass |
columns.className |
Class to assign to each cell in the column |
sContentPadding |
contentPadding |
Add padding to the text content used when calculating the optimal with for a table. |
sCookiePrefix |
Removed | |
sDefaultContent |
columns.defaultContent |
Set default, static, content for a column |
sDom |
dom |
Define the table control elements to appear on the page and in what order |
sName |
columns.name |
Set a descriptive name for a column |
sPaginationType |
pagingType |
Pagination button display options |
sScrollX |
scrollX |
Horizontal scrolling |
sScrollXInner |
scrollXInner |
Not documented in 1.10 |
sScrollY |
scrollY |
Vertical scrolling |
sServerMethod |
ajax |
Load data for the table's content from an Ajax source |
sSortDataType |
columns.orderDataType |
Live DOM sorting type assignment |
sTitle |
columns.title |
Set the column title |
sType |
columns.type |
Set the column type - used for filtering and sorting string processing |
sWidth |
columns.width |
Column width assignment |
API
Please note that the is a reference for converting usage of the old API to the new. The new API is far more comprehensive and have a lot of additional options that are not shown here. Please see the API reference for full information on how it can be used.
Hungarian | camelCase | Meaning |
---|---|---|
$ |
$ |
Perform a jQuery selection action on the full table. |
_ |
row().data() , rows().data() , cell().data() |
Get data from a row, column or cell |
fnAddData |
row.add() , rows.add() |
Add one or more new rows to the table. |
fnAdjustColumnSizing |
columns.adjust() |
Recalculate the column widths |
fnClearTable |
clear() |
Clear the table off all data. |
fnClose |
row().child.hide() |
Hide the child row(s) of a parent row |
fnDeleteRow |
row().remove() , rows().remove() |
Delete one or more rows from the DataTable. |
fnDestroy |
destroy() |
Destroy the DataTables in the current context. |
fnDraw |
draw() |
Redraw the table. |
fnFilter |
search() , column().search() , columns().search() |
Search for data in the table. |
fnGetData |
row().data() , rows().data() , cell().data() |
Get the data for a row, column or cell |
fnGetNodes |
row().node() , rows().nodes() , cell().node() |
Get the nodes for a row, column or cell |
fnGetPosition |
row().index() , cell().index() |
Get index information about the selected row, column or cell |
fnIsDataTable |
$.fn.dataTable.isDataTable() |
Check is a table node is a DataTable or not |
fnIsOpen |
row().child.isShown() |
Check if the child rows of a parent row are visible |
fnOpen |
row().child() |
Make the child row(s) of a parent row visible |
fnPageChange |
page() |
Get / set the current page of the table. |
fnSetColumnVis |
column().visible() |
Get / set the visibility of a single selected column. |
fnSettings |
settings() |
Obtain the table's settings object |
fnSort |
order() , column().order() |
Order the table by the selected column. |
fnSortListener |
order.listener() |
Add an ordering listener to an element, for a given column. |
fnTables |
$.fn.dataTable.tables() |
Get all DataTables on the page |
fnUpdate |
row().data() , cell().data() |
Set the data for a row or cell |
fnVersionCheck |
$.fn.dataTable.versionCheck() |
Version number compatibility check function< |