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']]
	} );
} )
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' ]
	} );
} )
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 "bEscapeRegex" option is optional (default true).
Default: { "sSearch": "", "bEscapeRegex": true }
Type: object { "sSearch": string, "bEscapeRegex": boolean }
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"
	} );
} )
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
    • 'F' - jQueryUI theme "footer" classes
  • 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"
	} );
} )