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 ('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"
} );
} )
|