DataTables logo DataTables

Options

Where the DataTables features can be considered rough grain tuning of your DataTables integration, there are many other parameters which will let you obtain the fine grain tuning you might need to make the integration truly seamless. Almost every function that DataTables provides can be fine tuned in some manner using the initialisation options shown below.

aaSorting
Show details 		If sorting is enabled, then DataTables will perform a first pass sort on initialisation. You can define which column(s) the sort is performed upon, and the sorting direction, with this variable. The aaSorting array should contain an array for each column to be sorted initially containing the column's index and a direction string ('asc' or 'desc').
Default: [[0,'asc']]
Type: array array[int,string]
Code example: 
$(document).ready( function() {
	$('#example').dataTable( {
		/* Sort by 3rd column first, and then 4th column */
		"aaSorting": [[2,'asc'], [3,'desc']]
	} );
} )
aaSortingFixed
Show details 		This parameter is basically identical to the aaSorting parameter, but cannot be overridden by user interaction with the table. What this means is that you could have a column (visible or hidden) which the sorting will always be forced on first - any sorting after that (from the user) will then be performed as required. This can be useful for grouping rows together.
Default: null
Type: array array[int,string]
Code example: 
$(document).ready( function() {
	$('#example').dataTable( {
		"aaSortingFixed": [[0,'asc']]
	} );
} )
aLengthMenu
Show details 		This parameter allows you to readily specify the entries in the length drop down menu that DataTables shows when pagination is enabled. It can be either a 1D array of options which will be used for both the displayed option and the value, or a 2D array which will use the array in the first position as the value, and the array in the second position as the displayed options (useful for language strings such as 'All').
Default: [ 10, 25, 50, 100 ]
Type: Array
Code example: 
$(document).ready(function() {
	$('#example').dataTable( {
		"aLengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]]
	} );
} );
aoSearchCols
Show details 		Basically the same as oSearch, this parameter defines the individual column filtering state at initialisation time. The array must be of the same size as the number of columns, and each element be an object with the parameters "sSearch" and "bEscapeRegex" (the latter is optional). 'null' is also accepted and the default will be used.
Default: null
Type: array objects
Code example: 
$(document).ready( function() {
	$('#example').dataTable( {
		"aoSearchCols": [
			null,
			{ "sSearch": "My filter" },
			null,
			{ "sSearch": "^[0-9]", "bEscapeRegex": false }
		]
	} );
} )
asStripClasses
Show details 		An array of CSS classes that should be applied to displayed rows. This array may be of any length, and DataTables will apply each class sequentially, looping when required.
Default: [ 'odd', 'even' ]
Type: Array Strings
Code example: 
$(document).ready( function() {
	$('#example').dataTable( {
		"asStripClasses": [ 'strip1', 'strip2', 'strip3' ]
	} );
} )
bDestroy
Show details 		Replace a DataTable which matches the given selector and replace it with one which has the properties of the new initialisation object passed. If no table matches the selector, then the new DataTable will be constructed as per normal.
Default: false
Type: Boolean
Code example: 
$(document).ready(function() {
	$('#example').dataTable( {
		"sScrollY": "200px",
		"bPaginate": false
	} );
	
	/* Some time later.... */
	$('#example').dataTable( {
		"bFilter": false,
		"bDestroy": true
	} );
} );
bRetrieve
Show details 		Retrieve the DataTables object for the given selector. Note that if the table has already been initialised, this parameter will cause DataTables to simply return the object that has already been set up - it will not take account of any changes you might have made to the initialisation object passed to DataTables (setting this parameter to true is an acknowledgement that you understand this). bDestroy can be used to reinitialise a table if you need.
Default: false
Type: Boolean
Code example: 
$(document).ready(function() {
	initTable();
	tableActions();
} );

function initTable ()
{
	return $('#example').dataTable( {
		"sScrollY": "200px",
		"bPaginate": false,
		"bRetrieve": true
	} );
}

function tableActions ()
{
	var oTable = initTable();
	/* perform API operations with oTable */
}
bScrollCollapse
Show details 		When vertical (y) scrolling is enabled, DataTables will force the height of the table's viewport to the given height at all times (useful for layout). However, this can look odd when filtering data down to a small data set, and the footer is left "floating" further down. This parameter (when enabled) will cause DataTables to collapse the table's viewport down when the result set will fit within the given Y height.
Default: false
Type: Boolean
Code example: 
$(document).ready(function() {
	$('#example').dataTable( {
		"sScrollY": "200",
		"bScrollCollapse": true
	} );
} );
iCookieDuration
Show details 		Duration of the cookie which is used for storing session information. This value is given in seconds.
Default: 7200 (2 hours).
Type: Integer
Code example: 
$(document).ready( function() {
	$('#example').dataTable( {
		"iCookieDuration": 60*60*24 /* 1 day */
	} );
} )
iDisplayLength
Show details 		Number of rows to display on a single page when using pagination. If feature enabled (bLengthChange) then the end user will be able to over-ride this to a custom setting using a pop-up menu.
Default: 10
Type: Integer
Code example: 
$(document).ready( function() {
	$('#example').dataTable( {
		"iDisplayLength": 50
	} );
} )
iDisplayStart
Show details 		Define the starting point for data display when using DataTables with pagination. Note that this parameter is the number of records, rather than the page number, so if you have 10 records per page and want to start on the third page, it should be "20".
Default: 0
Type: Integer
Code example: 
$(document).ready( function() {
	$('#example').dataTable( {
		"iDisplayStart": 20
	} );
} )
oSearch
Show details 		This parameter allows you to have define the global filtering state at initialisation time. As an object the "sSearch" parameter must be defined, but the "bRegex" and "bSmart" parameters are optional. When "bRegex" is true, the search string will be treated as a regular expression, when false (default) it will be treated as a straight string. When "bSmart" DataTables will use it's smart filtering methods (to word match at any point in the data), when false this will not be done.
Default: { "sSearch": "", "bRegex": false, "bSmart": true }
Type: object {
Code example: 
$(document).ready( function() {
	$('#example').dataTable( {
		"oSearch": {"sSearch": "Initial search"}
	} );
} )
sAjaxSource
Show details 		You can instruct DataTables to load data from an external source using this parameter (use aData if you want to pass data in you already have). Simply provide a url a JSON object can be obtained from. This object must include the parameter 'aaData' which is a 2D array with the source data.
Default: null
Type: String
Code example: 
$(document).ready( function() {
	$('#example').dataTable( {
		"sAjaxSource": "http://www.sprymedia.co.uk/dataTables/json.php"
	} );
} )
sCookiePrefix
Show details 		This parameter can be used to override the default prefix that DataTables assigns to a cookie when state saving is enabled.
Default: SpryMedia_DataTables_
Type: String
Code example: 
$(document).ready(function() {
	$('#example').dataTable( {
		"sCookiePrefix": "my_datatable_",
	} );
} );
sDom
Show details 		This initialisation variable allows you to specify exactly where in the DOM you want DataTables to inject the various controls it adds to the page (for example you might want the pagination controls at the top of the table). DIV elements (with or without a custom class) can also be added to aid styling. The follow syntax is used:
  • The following options are allowed:
    • 'l' - Length changing
    • 'f' - Filtering input
    • 't' - The table!
    • 'i' - Information
    • 'p' - Pagination
    • 'r' - pRocessing
  • The following constants are allowed:
    • 'H' - jQueryUI theme "header" classes ('fg-toolbar ui-widget-header ui-corner-tl ui-corner-tr ui-helper-clearfix')
    • 'F' - jQueryUI theme "footer" classes ('fg-toolbar ui-widget-header ui-corner-bl ui-corner-br ui-helper-clearfix')
  • The following syntax is expected:
    • '<' and '>' - div elements
    • '<"class" and '>' - div with a class
  • Examples:
    • '<"wrapper"flipt>', 'ip>'
Default: lfrtip (when bJQueryUI is false)
or
<"H"lfr>t<"F"ip> (when bJQueryUI is true)
Type: String
Code example: 
$(document).ready(function() {
	$('#example').dataTable( {
		"sDom": '<"top"i>rt<"bottom"flp><"clear">'
	} );
} );
sPaginationType
Show details 		DataTables features two different built-in pagination interaction methods ('two_button' or 'full_numbers') which present different page controls to the end user. Further methods can be added using the API (see below).
Default: two_button
Type: String
Code example: 
$(document).ready( function() {
	$('#example').dataTable( {
		"sPaginationType": "full_numbers"
	} );
} )
sScrollXInner
Show details 		This property can be used to force a DataTable to use more width than it might otherwise do when x-scrolling is enabled. For example if you have a table which requires to be well spaced, this parameter is useful for "over-sizing" the table, and thus forcing scrolling. This property can by any CSS unit, or a number (in which case it will be treated as a pixel measurement).
Default: blank string - i.e. disabled
Type: String
Code example: 
$(document).ready(function() {
	$('#example').dataTable( {
		"sScrollX": "100%",
		"sScrollXInner": "110%"
	} );
} );