4 * Initialisation options that can be given to DataTables at initialisation
10 * An array of data to use for the table, passed in at initialisation which
11 * will be used in preference to any data which is already in the DOM. This is
12 * particularly useful for constructing tables purely in Javascript, for
13 * example with a custom Ajax call.
19 * // Using a 2D array data source
20 * $(document).ready( function () {
21 * $('#example').dataTable( {
23 * ['Trident', 'Internet Explorer 4.0', 'Win 95+', 4, 'X'],
24 * ['Trident', 'Internet Explorer 5.0', 'Win 95+', 5, 'C'],
27 * { "sTitle": "Engine" },
28 * { "sTitle": "Browser" },
29 * { "sTitle": "Platform" },
30 * { "sTitle": "Version" },
31 * { "sTitle": "Grade" }
37 * // Using an array of objects as a data source (mData)
38 * $(document).ready( function () {
39 * $('#example').dataTable( {
42 * "engine": "Trident",
43 * "browser": "Internet Explorer 4.0",
44 * "platform": "Win 95+",
49 * "engine": "Trident",
50 * "browser": "Internet Explorer 5.0",
51 * "platform": "Win 95+",
57 * { "sTitle": "Engine", "mData": "engine" },
58 * { "sTitle": "Browser", "mData": "browser" },
59 * { "sTitle": "Platform", "mData": "platform" },
60 * { "sTitle": "Version", "mData": "version" },
61 * { "sTitle": "Grade", "mData": "grade" }
70 * If sorting is enabled, then DataTables will perform a first pass sort on
71 * initialisation. You can define which column(s) the sort is performed upon,
72 * and the sorting direction, with this variable. The aaSorting array should
73 * contain an array for each column to be sorted initially containing the
74 * column's index and a direction string ('asc' or 'desc').
76 * @default [[0,'asc']]
80 * // Sort by 3rd column first, and then 4th column
81 * $(document).ready( function() {
82 * $('#example').dataTable( {
83 * "aaSorting": [[2,'asc'], [3,'desc']]
87 * // No initial sorting
88 * $(document).ready( function() {
89 * $('#example').dataTable( {
94 "aaSorting": [[0,'asc']],
98 * This parameter is basically identical to the aaSorting parameter, but
99 * cannot be overridden by user interaction with the table. What this means
100 * is that you could have a column (visible or hidden) which the sorting will
101 * always be forced on first - any sorting after that (from the user) will
102 * then be performed as required. This can be useful for grouping rows
109 * $(document).ready( function() {
110 * $('#example').dataTable( {
111 * "aaSortingFixed": [[0,'asc']]
115 "aaSortingFixed": null,
119 * This parameter allows you to readily specify the entries in the length drop
120 * down menu that DataTables shows when pagination is enabled. It can be
121 * either a 1D array of options which will be used for both the displayed
122 * option and the value, or a 2D array which will use the array in the first
123 * position as the value, and the array in the second position as the
124 * displayed options (useful for language strings such as 'All').
126 * @default [ 10, 25, 50, 100 ]
130 * $(document).ready( function() {
131 * $('#example').dataTable( {
132 * "aLengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]]
137 * // Setting the default display length as well as length menu
138 * // This is likely to be wanted if you remove the '10' option which
139 * // is the iDisplayLength default.
140 * $(document).ready( function() {
141 * $('#example').dataTable( {
142 * "iDisplayLength": 25,
143 * "aLengthMenu": [[25, 50, 100, -1], [25, 50, 100, "All"]]
147 "aLengthMenu": [ 10, 25, 50, 100 ],
151 * The aoColumns option in the initialisation parameter allows you to define
152 * details about the way individual columns behave. For a full list of
153 * column options that can be set, please see
154 * {@link DataTable.defaults.columns}. Note that if you use aoColumns to
155 * define your columns, you must have an entry in the array for every single
156 * column that you have in your table (these can be null if you don't which
157 * to specify any options).
163 * Very similar to aoColumns, aoColumnDefs allows you to target a specific
164 * column, multiple columns, or all columns, using the aTargets property of
165 * each object in the array. This allows great flexibility when creating
166 * tables, as the aoColumnDefs arrays can be of any length, targeting the
167 * columns you specifically want. aoColumnDefs may use any of the column
168 * options available: {@link DataTable.defaults.columns}, but it _must_
169 * have aTargets defined in each object in the array. Values in the aTargets
172 * <li>a string - class name will be matched on the TH for the column</li>
173 * <li>0 or a positive integer - column index counting from the left</li>
174 * <li>a negative integer - column index counting from the right</li>
175 * <li>the string "_all" - all columns (i.e. assign a default)</li>
179 "aoColumnDefs": null,
183 * Basically the same as oSearch, this parameter defines the individual column
184 * filtering state at initialisation time. The array must be of the same size
185 * as the number of columns, and each element be an object with the parameters
186 * "sSearch" and "bEscapeRegex" (the latter is optional). 'null' is also
187 * accepted and the default will be used.
193 * $(document).ready( function() {
194 * $('#example').dataTable( {
197 * { "sSearch": "My filter" },
199 * { "sSearch": "^[0-9]", "bEscapeRegex": false }
208 * An array of CSS classes that should be applied to displayed rows. This
209 * array may be of any length, and DataTables will apply each class
210 * sequentially, looping when required.
212 * @default null <i>Will take the values determined by the oClasses.sStripe*
217 * $(document).ready( function() {
218 * $('#example').dataTable( {
219 * "asStripeClasses": [ 'strip1', 'strip2', 'strip3' ]
223 "asStripeClasses": null,
227 * Enable or disable automatic column width calculation. This can be disabled
228 * as an optimisation (it takes some time to calculate the widths) if the
229 * tables widths are passed in using aoColumns.
235 * $(document).ready( function () {
236 * $('#example').dataTable( {
237 * "bAutoWidth": false
245 * Deferred rendering can provide DataTables with a huge speed boost when you
246 * are using an Ajax or JS data source for the table. This option, when set to
247 * true, will cause DataTables to defer the creation of the table elements for
248 * each row until they are needed for a draw - saving a significant amount of
255 * $(document).ready( function() {
256 * var oTable = $('#example').dataTable( {
257 * "sAjaxSource": "sources/arrays.txt",
258 * "bDeferRender": true
262 "bDeferRender": false,
266 * Replace a DataTable which matches the given selector and replace it with
267 * one which has the properties of the new initialisation object passed. If no
268 * table matches the selector, then the new DataTable will be constructed as
275 * $(document).ready( function() {
276 * $('#example').dataTable( {
277 * "sScrollY": "200px",
281 * // Some time later....
282 * $('#example').dataTable( {
292 * Enable or disable filtering of data. Filtering in DataTables is "smart" in
293 * that it allows the end user to input multiple words (space separated) and
294 * will match a row containing those words, even if not in the order that was
295 * specified (this allow matching across multiple columns). Note that if you
296 * wish to use filtering in DataTables this must remain 'true' - to remove the
297 * default filtering input box and retain filtering abilities, please use
298 * {@link DataTable.defaults.sDom}.
304 * $(document).ready( function () {
305 * $('#example').dataTable( {
314 * Enable or disable the table information display. This shows information
315 * about the data that is currently visible on the page, including information
316 * about filtered data if that action is being performed.
322 * $(document).ready( function () {
323 * $('#example').dataTable( {
332 * Enable jQuery UI ThemeRoller support (required as ThemeRoller requires some
333 * slightly different and additional mark-up from what DataTables has
334 * traditionally used).
340 * $(document).ready( function() {
341 * $('#example').dataTable( {
350 * Allows the end user to select the size of a formatted page from a select
351 * menu (sizes are 10, 25, 50 and 100). Requires pagination (bPaginate).
357 * $(document).ready( function () {
358 * $('#example').dataTable( {
359 * "bLengthChange": false
363 "bLengthChange": true,
367 * Enable or disable pagination.
373 * $(document).ready( function () {
374 * $('#example').dataTable( {
383 * Enable or disable the display of a 'processing' indicator when the table is
384 * being processed (e.g. a sort). This is particularly useful for tables with
385 * large amounts of data where it can take a noticeable amount of time to sort
392 * $(document).ready( function () {
393 * $('#example').dataTable( {
394 * "bProcessing": true
398 "bProcessing": false,
402 * Retrieve the DataTables object for the given selector. Note that if the
403 * table has already been initialised, this parameter will cause DataTables
404 * to simply return the object that has already been set up - it will not take
405 * account of any changes you might have made to the initialisation object
406 * passed to DataTables (setting this parameter to true is an acknowledgement
407 * that you understand this). bDestroy can be used to reinitialise a table if
414 * $(document).ready( function() {
419 * function initTable ()
421 * return $('#example').dataTable( {
422 * "sScrollY": "200px",
423 * "bPaginate": false,
428 * function tableActions ()
430 * var oTable = initTable();
431 * // perform API operations with oTable
438 * Indicate if DataTables should be allowed to set the padding / margin
439 * etc for the scrolling header elements or not. Typically you will want
446 * $(document).ready( function() {
447 * $('#example').dataTable( {
448 * "bScrollAutoCss": false,
449 * "sScrollY": "200px"
453 "bScrollAutoCss": true,
457 * When vertical (y) scrolling is enabled, DataTables will force the height of
458 * the table's viewport to the given height at all times (useful for layout).
459 * However, this can look odd when filtering data down to a small data set,
460 * and the footer is left "floating" further down. This parameter (when
461 * enabled) will cause DataTables to collapse the table's viewport down when
462 * the result set will fit within the given Y height.
468 * $(document).ready( function() {
469 * $('#example').dataTable( {
471 * "bScrollCollapse": true
475 "bScrollCollapse": false,
479 * Enable infinite scrolling for DataTables (to be used in combination with
480 * sScrollY). Infinite scrolling means that DataTables will continually load
481 * data as a user scrolls through a table, which is very useful for large
482 * dataset. This cannot be used with pagination, which is automatically
483 * disabled. Note - the Scroller extra for DataTables is recommended in
484 * in preference to this option.
490 * $(document).ready( function() {
491 * $('#example').dataTable( {
492 * "bScrollInfinite": true,
493 * "bScrollCollapse": true,
494 * "sScrollY": "200px"
498 "bScrollInfinite": false,
502 * Configure DataTables to use server-side processing. Note that the
503 * sAjaxSource parameter must also be given in order to give DataTables a
504 * source to obtain the required data for each draw.
511 * $(document).ready( function () {
512 * $('#example').dataTable( {
513 * "bServerSide": true,
514 * "sAjaxSource": "xhr.php"
518 "bServerSide": false,
522 * Enable or disable sorting of columns. Sorting of individual columns can be
523 * disabled by the "bSortable" option for each column.
529 * $(document).ready( function () {
530 * $('#example').dataTable( {
539 * Allows control over whether DataTables should use the top (true) unique
540 * cell that is found for a single column, or the bottom (false - default).
541 * This is useful when using complex headers.
547 * $(document).ready( function() {
548 * $('#example').dataTable( {
549 * "bSortCellsTop": true
553 "bSortCellsTop": false,
557 * Enable or disable the addition of the classes 'sorting_1', 'sorting_2' and
558 * 'sorting_3' to the columns which are currently being sorted on. This is
559 * presented as a feature switch as it can increase processing time (while
560 * classes are removed and added) so for large data sets you might want to
567 * $(document).ready( function () {
568 * $('#example').dataTable( {
569 * "bSortClasses": false
573 "bSortClasses": true,
577 * Enable or disable state saving. When enabled a cookie will be used to save
578 * table display information such as pagination information, display length,
579 * filtering and sorting. As such when the end user reloads the page the
580 * display display will match what thy had previously set up.
586 * $(document).ready( function () {
587 * $('#example').dataTable( {
596 * Customise the cookie and / or the parameters being stored when using
597 * DataTables with state saving enabled. This function is called whenever
598 * the cookie is modified, and it expects a fully formed cookie string to be
599 * returned. Note that the data object passed in is a Javascript object which
600 * must be converted to a string (JSON.stringify for example).
602 * @param {string} sName Name of the cookie defined by DataTables
603 * @param {object} oData Data to be stored in the cookie
604 * @param {string} sExpires Cookie expires string
605 * @param {string} sPath Path of the cookie to set
606 * @returns {string} Cookie formatted string (which should be encoded by
607 * using encodeURIComponent())
611 * $(document).ready( function () {
612 * $('#example').dataTable( {
613 * "fnCookieCallback": function (sName, oData, sExpires, sPath) {
614 * // Customise oData or sName or whatever else here
615 * return sName + "="+JSON.stringify(oData)+"; expires=" + sExpires +"; path=" + sPath;
620 "fnCookieCallback": null,
624 * This function is called when a TR element is created (and all TD child
625 * elements have been inserted), or registered if using a DOM source, allowing
626 * manipulation of the TR element (adding classes etc).
628 * @param {node} nRow "TR" element for the current row
629 * @param {array} aData Raw data array for this row
630 * @param {int} iDataIndex The index of this row in aoData
634 * $(document).ready( function() {
635 * $('#example').dataTable( {
636 * "fnCreatedRow": function( nRow, aData, iDataIndex ) {
637 * // Bold the grade for all 'A' grade browsers
638 * if ( aData[4] == "A" )
640 * $('td:eq(4)', nRow).html( '<b>A</b>' );
646 "fnCreatedRow": null,
650 * This function is called on every 'draw' event, and allows you to
651 * dynamically modify any aspect you want about the created DOM.
653 * @param {object} oSettings DataTables settings object
657 * $(document).ready( function() {
658 * $('#example').dataTable( {
659 * "fnDrawCallback": function( oSettings ) {
660 * alert( 'DataTables has redrawn the table' );
665 "fnDrawCallback": null,
669 * Identical to fnHeaderCallback() but for the table footer this function
670 * allows you to modify the table footer on every 'draw' even.
672 * @param {node} nFoot "TR" element for the footer
673 * @param {array} aData Full table data (as derived from the original HTML)
674 * @param {int} iStart Index for the current display starting point in the
676 * @param {int} iEnd Index for the current display ending point in the
678 * @param {array int} aiDisplay Index array to translate the visual position
679 * to the full data array
683 * $(document).ready( function() {
684 * $('#example').dataTable( {
685 * "fnFooterCallback": function( nFoot, aData, iStart, iEnd, aiDisplay ) {
686 * nFoot.getElementsByTagName('th')[0].innerHTML = "Starting index is "+iStart;
691 "fnFooterCallback": null,
695 * When rendering large numbers in the information element for the table
696 * (i.e. "Showing 1 to 10 of 57 entries") DataTables will render large numbers
697 * to have a comma separator for the 'thousands' units (e.g. 1 million is
698 * rendered as "1,000,000") to help readability for the end user. This
699 * function will override the default method DataTables uses.
702 * @param {int} iIn number to be formatted
703 * @returns {string} formatted string for DataTables to show the number
707 * $(document).ready( function() {
708 * $('#example').dataTable( {
709 * "fnFormatNumber": function ( iIn ) {
710 * if ( iIn < 1000 ) {
715 * a=s.split(""), out="",
718 * for ( var i=0 ; i<iLen ; i++ ) {
719 * if ( i%3 === 0 && i !== 0 ) {
722 * out = a[iLen-i-1]+out;
730 "fnFormatNumber": function ( iIn ) {
733 // A small optimisation for what is likely to be the majority of use cases
737 var s=(iIn+""), a=s.split(""), out="", iLen=s.length;
739 for ( var i=0 ; i<iLen ; i++ )
741 if ( i%3 === 0 && i !== 0 )
743 out = this.oLanguage.sInfoThousands+out;
745 out = a[iLen-i-1]+out;
752 * This function is called on every 'draw' event, and allows you to
753 * dynamically modify the header row. This can be used to calculate and
754 * display useful information about the table.
756 * @param {node} nHead "TR" element for the header
757 * @param {array} aData Full table data (as derived from the original HTML)
758 * @param {int} iStart Index for the current display starting point in the
760 * @param {int} iEnd Index for the current display ending point in the
762 * @param {array int} aiDisplay Index array to translate the visual position
763 * to the full data array
767 * $(document).ready( function() {
768 * $('#example').dataTable( {
769 * "fnHeaderCallback": function( nHead, aData, iStart, iEnd, aiDisplay ) {
770 * nHead.getElementsByTagName('th')[0].innerHTML = "Displaying "+(iEnd-iStart)+" records";
775 "fnHeaderCallback": null,
779 * The information element can be used to convey information about the current
780 * state of the table. Although the internationalisation options presented by
781 * DataTables are quite capable of dealing with most customisations, there may
782 * be times where you wish to customise the string further. This callback
783 * allows you to do exactly that.
785 * @param {object} oSettings DataTables settings object
786 * @param {int} iStart Starting position in data for the draw
787 * @param {int} iEnd End position in data for the draw
788 * @param {int} iMax Total number of rows in the table (regardless of
790 * @param {int} iTotal Total number of rows in the data set, after filtering
791 * @param {string} sPre The string that DataTables has formatted using it's
793 * @returns {string} The string to be displayed in the information element.
797 * $('#example').dataTable( {
798 * "fnInfoCallback": function( oSettings, iStart, iEnd, iMax, iTotal, sPre ) {
799 * return iStart +" to "+ iEnd;
803 "fnInfoCallback": null,
807 * Called when the table has been initialised. Normally DataTables will
808 * initialise sequentially and there will be no need for this function,
809 * however, this does not hold true when using external language information
810 * since that is obtained using an async XHR call.
812 * @param {object} oSettings DataTables settings object
813 * @param {object} json The JSON object request from the server - only
814 * present if client-side Ajax sourced data is used
818 * $(document).ready( function() {
819 * $('#example').dataTable( {
820 * "fnInitComplete": function(oSettings, json) {
821 * alert( 'DataTables has finished its initialisation.' );
826 "fnInitComplete": null,
830 * Called at the very start of each table draw and can be used to cancel the
831 * draw by returning false, any other return (including undefined) results in
832 * the full draw occurring).
834 * @param {object} oSettings DataTables settings object
835 * @returns {boolean} False will cancel the draw, anything else (including no
836 * return) will allow it to complete.
840 * $(document).ready( function() {
841 * $('#example').dataTable( {
842 * "fnPreDrawCallback": function( oSettings ) {
843 * if ( $('#test').val() == 1 ) {
850 "fnPreDrawCallback": null,
854 * This function allows you to 'post process' each row after it have been
855 * generated for each table draw, but before it is rendered on screen. This
856 * function might be used for setting the row class name etc.
858 * @param {node} nRow "TR" element for the current row
859 * @param {array} aData Raw data array for this row
860 * @param {int} iDisplayIndex The display index for the current table draw
861 * @param {int} iDisplayIndexFull The index of the data in the full list of
862 * rows (after filtering)
866 * $(document).ready( function() {
867 * $('#example').dataTable( {
868 * "fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
869 * // Bold the grade for all 'A' grade browsers
870 * if ( aData[4] == "A" )
872 * $('td:eq(4)', nRow).html( '<b>A</b>' );
878 "fnRowCallback": null,
882 * This parameter allows you to override the default function which obtains
883 * the data from the server ($.getJSON) so something more suitable for your
884 * application. For example you could use POST data, or pull information from
885 * a Gears or AIR database.
888 * @param {string} sSource HTTP source to obtain the data from (sAjaxSource)
889 * @param {array} aoData A key/value pair object containing the data to send
891 * @param {function} fnCallback to be called on completion of the data get
892 * process that will draw the data on the page.
893 * @param {object} oSettings DataTables settings object
898 * // POST data to server
899 * $(document).ready( function() {
900 * $('#example').dataTable( {
901 * "bProcessing": true,
902 * "bServerSide": true,
903 * "sAjaxSource": "xhr.php",
904 * "fnServerData": function ( sSource, aoData, fnCallback, oSettings ) {
905 * oSettings.jqXHR = $.ajax( {
906 * "dataType": 'json',
910 * "success": fnCallback
916 "fnServerData": function ( sUrl, aoData, fnCallback, oSettings ) {
917 oSettings.jqXHR = $.ajax( {
920 "success": function (json) {
922 oSettings.oApi._fnLog( oSettings, 0, json.sError );
925 $(oSettings.oInstance).trigger('xhr', [oSettings, json]);
930 "type": oSettings.sServerMethod,
931 "error": function (xhr, error, thrown) {
932 if ( error == "parsererror" ) {
933 oSettings.oApi._fnLog( oSettings, 0, "DataTables warning: JSON data from "+
934 "server could not be parsed. This is caused by a JSON formatting error." );
942 * It is often useful to send extra data to the server when making an Ajax
943 * request - for example custom filtering information, and this callback
944 * function makes it trivial to send extra information to the server. The
945 * passed in parameter is the data set that has been constructed by
946 * DataTables, and you can add to this or modify it as you require.
948 * @param {array} aoData Data array (array of objects which are name/value
949 * pairs) that has been constructed by DataTables and will be sent to the
950 * server. In the case of Ajax sourced data with server-side processing
951 * this will be an empty array, for server-side processing there will be a
952 * significant number of parameters!
953 * @returns {undefined} Ensure that you modify the aoData array passed in,
954 * as this is passed by reference.
959 * $(document).ready( function() {
960 * $('#example').dataTable( {
961 * "bProcessing": true,
962 * "bServerSide": true,
963 * "sAjaxSource": "scripts/server_processing.php",
964 * "fnServerParams": function ( aoData ) {
965 * aoData.push( { "name": "more_data", "value": "my_value" } );
970 "fnServerParams": null,
974 * Load the table state. With this function you can define from where, and how, the
975 * state of a table is loaded. By default DataTables will load from its state saving
976 * cookie, but you might wish to use local storage (HTML5) or a server-side database.
979 * @param {object} oSettings DataTables settings object
980 * @return {object} The DataTables state object to be loaded
984 * $(document).ready( function() {
985 * $('#example').dataTable( {
986 * "bStateSave": true,
987 * "fnStateLoad": function (oSettings) {
990 * // Send an Ajax request to the server to get the data. Note that
991 * // this is a synchronous request.
993 * "url": "/state_load",
995 * "dataType": "json",
996 * "success": function (json) {
1006 "fnStateLoad": function ( oSettings ) {
1007 var sData = this.oApi._fnReadCookie( oSettings.sCookiePrefix+oSettings.sInstance );
1011 oData = (typeof $.parseJSON === 'function') ?
1012 $.parseJSON(sData) : eval( '('+sData+')' );
1022 * Callback which allows modification of the saved state prior to loading that state.
1023 * This callback is called when the table is loading state from the stored data, but
1024 * prior to the settings object being modified by the saved state. Note that for
1025 * plug-in authors, you should use the 'stateLoadParams' event to load parameters for
1028 * @param {object} oSettings DataTables settings object
1029 * @param {object} oData The state object that is to be loaded
1033 * // Remove a saved filter, so filtering is never loaded
1034 * $(document).ready( function() {
1035 * $('#example').dataTable( {
1036 * "bStateSave": true,
1037 * "fnStateLoadParams": function (oSettings, oData) {
1038 * oData.oSearch.sSearch = "";
1044 * // Disallow state loading by returning false
1045 * $(document).ready( function() {
1046 * $('#example').dataTable( {
1047 * "bStateSave": true,
1048 * "fnStateLoadParams": function (oSettings, oData) {
1054 "fnStateLoadParams": null,
1058 * Callback that is called when the state has been loaded from the state saving method
1059 * and the DataTables settings object has been modified as a result of the loaded state.
1061 * @param {object} oSettings DataTables settings object
1062 * @param {object} oData The state object that was loaded
1066 * // Show an alert with the filtering value that was saved
1067 * $(document).ready( function() {
1068 * $('#example').dataTable( {
1069 * "bStateSave": true,
1070 * "fnStateLoaded": function (oSettings, oData) {
1071 * alert( 'Saved filter was: '+oData.oSearch.sSearch );
1076 "fnStateLoaded": null,
1080 * Save the table state. This function allows you to define where and how the state
1081 * information for the table is stored - by default it will use a cookie, but you
1082 * might want to use local storage (HTML5) or a server-side database.
1085 * @param {object} oSettings DataTables settings object
1086 * @param {object} oData The state object to be saved
1090 * $(document).ready( function() {
1091 * $('#example').dataTable( {
1092 * "bStateSave": true,
1093 * "fnStateSave": function (oSettings, oData) {
1094 * // Send an Ajax request to the server with the state object
1096 * "url": "/state_save",
1098 * "dataType": "json",
1100 * "success": function () {}
1106 "fnStateSave": function ( oSettings, oData ) {
1107 this.oApi._fnCreateCookie(
1108 oSettings.sCookiePrefix+oSettings.sInstance,
1109 this.oApi._fnJsonString(oData),
1110 oSettings.iCookieDuration,
1111 oSettings.sCookiePrefix,
1112 oSettings.fnCookieCallback
1118 * Callback which allows modification of the state to be saved. Called when the table
1119 * has changed state a new state save is required. This method allows modification of
1120 * the state saving object prior to actually doing the save, including addition or
1121 * other state properties or modification. Note that for plug-in authors, you should
1122 * use the 'stateSaveParams' event to save parameters for a plug-in.
1124 * @param {object} oSettings DataTables settings object
1125 * @param {object} oData The state object to be saved
1129 * // Remove a saved filter, so filtering is never saved
1130 * $(document).ready( function() {
1131 * $('#example').dataTable( {
1132 * "bStateSave": true,
1133 * "fnStateSaveParams": function (oSettings, oData) {
1134 * oData.oSearch.sSearch = "";
1139 "fnStateSaveParams": null,
1143 * Duration of the cookie which is used for storing session information. This
1144 * value is given in seconds.
1146 * @default 7200 <i>(2 hours)</i>
1150 * $(document).ready( function() {
1151 * $('#example').dataTable( {
1152 * "iCookieDuration": 60*60*24; // 1 day
1156 "iCookieDuration": 7200,
1160 * When enabled DataTables will not make a request to the server for the first
1161 * page draw - rather it will use the data already on the page (no sorting etc
1162 * will be applied to it), thus saving on an XHR at load time. iDeferLoading
1163 * is used to indicate that deferred loading is required, but it is also used
1164 * to tell DataTables how many records there are in the full table (allowing
1165 * the information element and pagination to be displayed correctly). In the case
1166 * where a filtering is applied to the table on initial load, this can be
1167 * indicated by giving the parameter as an array, where the first element is
1168 * the number of records available after filtering and the second element is the
1169 * number of records without filtering (allowing the table information element
1170 * to be shown correctly).
1176 * // 57 records available in the table, no filtering applied
1177 * $(document).ready( function() {
1178 * $('#example').dataTable( {
1179 * "bServerSide": true,
1180 * "sAjaxSource": "scripts/server_processing.php",
1181 * "iDeferLoading": 57
1186 * // 57 records after filtering, 100 without filtering (an initial filter applied)
1187 * $(document).ready( function() {
1188 * $('#example').dataTable( {
1189 * "bServerSide": true,
1190 * "sAjaxSource": "scripts/server_processing.php",
1191 * "iDeferLoading": [ 57, 100 ],
1193 * "sSearch": "my_filter"
1198 "iDeferLoading": null,
1202 * Number of rows to display on a single page when using pagination. If
1203 * feature enabled (bLengthChange) then the end user will be able to override
1204 * this to a custom setting using a pop-up menu.
1210 * $(document).ready( function() {
1211 * $('#example').dataTable( {
1212 * "iDisplayLength": 50
1216 "iDisplayLength": 10,
1220 * Define the starting point for data display when using DataTables with
1221 * pagination. Note that this parameter is the number of records, rather than
1222 * the page number, so if you have 10 records per page and want to start on
1223 * the third page, it should be "20".
1229 * $(document).ready( function() {
1230 * $('#example').dataTable( {
1231 * "iDisplayStart": 20
1239 * The scroll gap is the amount of scrolling that is left to go before
1240 * DataTables will load the next 'page' of data automatically. You typically
1241 * want a gap which is big enough that the scrolling will be smooth for the
1242 * user, while not so large that it will load more data than need.
1248 * $(document).ready( function() {
1249 * $('#example').dataTable( {
1250 * "bScrollInfinite": true,
1251 * "bScrollCollapse": true,
1252 * "sScrollY": "200px",
1253 * "iScrollLoadGap": 50
1257 "iScrollLoadGap": 100,
1261 * By default DataTables allows keyboard navigation of the table (sorting, paging,
1262 * and filtering) by adding a tabindex attribute to the required elements. This
1263 * allows you to tab through the controls and press the enter key to activate them.
1264 * The tabindex is default 0, meaning that the tab follows the flow of the document.
1265 * You can overrule this using this parameter if you wish. Use a value of -1 to
1266 * disable built-in keyboard navigation.
1272 * $(document).ready( function() {
1273 * $('#example').dataTable( {
1282 * All strings that DataTables uses in the user interface that it creates
1283 * are defined in this object, allowing you to modified them individually or
1284 * completely replace them all as required.
1289 * Strings that are used for WAI-ARIA labels and controls only (these are not
1290 * actually visible on the page, but will be read by screenreaders, and thus
1291 * must be internationalised as well).
1296 * ARIA label that is added to the table headers when the column may be
1297 * sorted ascending by activing the column (click or return when focused).
1298 * Note that the column header is prefixed to this string.
1300 * @default : activate to sort column ascending
1304 * $(document).ready( function() {
1305 * $('#example').dataTable( {
1308 * "sSortAscending": " - click/return to sort ascending"
1314 "sSortAscending": ": activate to sort column ascending",
1317 * ARIA label that is added to the table headers when the column may be
1318 * sorted descending by activing the column (click or return when focused).
1319 * Note that the column header is prefixed to this string.
1321 * @default : activate to sort column ascending
1325 * $(document).ready( function() {
1326 * $('#example').dataTable( {
1329 * "sSortDescending": " - click/return to sort descending"
1335 "sSortDescending": ": activate to sort column descending"
1339 * Pagination string used by DataTables for the two built-in pagination
1340 * control types ("two_button" and "full_numbers")
1345 * Text to use when using the 'full_numbers' type of pagination for the
1346 * button to take the user to the first page.
1352 * $(document).ready( function() {
1353 * $('#example').dataTable( {
1356 * "sFirst": "First page"
1366 * Text to use when using the 'full_numbers' type of pagination for the
1367 * button to take the user to the last page.
1373 * $(document).ready( function() {
1374 * $('#example').dataTable( {
1377 * "sLast": "Last page"
1387 * Text to use for the 'next' pagination button (to take the user to the
1394 * $(document).ready( function() {
1395 * $('#example').dataTable( {
1398 * "sNext": "Next page"
1408 * Text to use for the 'previous' pagination button (to take the user to
1409 * the previous page).
1415 * $(document).ready( function() {
1416 * $('#example').dataTable( {
1419 * "sPrevious": "Previous page"
1425 "sPrevious": "Previous"
1429 * This string is shown in preference to sZeroRecords when the table is
1430 * empty of data (regardless of filtering). Note that this is an optional
1431 * parameter - if it is not given, the value of sZeroRecords will be used
1432 * instead (either the default or given value).
1434 * @default No data available in table
1438 * $(document).ready( function() {
1439 * $('#example').dataTable( {
1441 * "sEmptyTable": "No data available in table"
1446 "sEmptyTable": "No data available in table",
1450 * This string gives information to the end user about the information that
1451 * is current on display on the page. The _START_, _END_ and _TOTAL_
1452 * variables are all dynamically replaced as the table display updates, and
1453 * can be freely moved or removed as the language requirements change.
1455 * @default Showing _START_ to _END_ of _TOTAL_ entries
1459 * $(document).ready( function() {
1460 * $('#example').dataTable( {
1462 * "sInfo": "Got a total of _TOTAL_ entries to show (_START_ to _END_)"
1467 "sInfo": "Showing _START_ to _END_ of _TOTAL_ entries",
1471 * Display information string for when the table is empty. Typically the
1472 * format of this string should match sInfo.
1474 * @default Showing 0 to 0 of 0 entries
1478 * $(document).ready( function() {
1479 * $('#example').dataTable( {
1481 * "sInfoEmpty": "No entries to show"
1486 "sInfoEmpty": "Showing 0 to 0 of 0 entries",
1490 * When a user filters the information in a table, this string is appended
1491 * to the information (sInfo) to give an idea of how strong the filtering
1492 * is. The variable _MAX_ is dynamically updated.
1494 * @default (filtered from _MAX_ total entries)
1498 * $(document).ready( function() {
1499 * $('#example').dataTable( {
1501 * "sInfoFiltered": " - filtering from _MAX_ records"
1506 "sInfoFiltered": "(filtered from _MAX_ total entries)",
1510 * If can be useful to append extra information to the info string at times,
1511 * and this variable does exactly that. This information will be appended to
1512 * the sInfo (sInfoEmpty and sInfoFiltered in whatever combination they are
1513 * being used) at all times.
1515 * @default <i>Empty string</i>
1519 * $(document).ready( function() {
1520 * $('#example').dataTable( {
1522 * "sInfoPostFix": "All records shown are derived from real information."
1531 * DataTables has a build in number formatter (fnFormatNumber) which is used
1532 * to format large numbers that are used in the table information. By
1533 * default a comma is used, but this can be trivially changed to any
1534 * character you wish with this parameter.
1540 * $(document).ready( function() {
1541 * $('#example').dataTable( {
1543 * "sInfoThousands": "'"
1548 "sInfoThousands": ",",
1552 * Detail the action that will be taken when the drop down menu for the
1553 * pagination length option is changed. The '_MENU_' variable is replaced
1554 * with a default select list of 10, 25, 50 and 100, and can be replaced
1555 * with a custom select box if required.
1557 * @default Show _MENU_ entries
1561 * // Language change only
1562 * $(document).ready( function() {
1563 * $('#example').dataTable( {
1565 * "sLengthMenu": "Display _MENU_ records"
1571 * // Language and options change
1572 * $(document).ready( function() {
1573 * $('#example').dataTable( {
1575 * "sLengthMenu": 'Display <select>'+
1576 * '<option value="10">10</option>'+
1577 * '<option value="20">20</option>'+
1578 * '<option value="30">30</option>'+
1579 * '<option value="40">40</option>'+
1580 * '<option value="50">50</option>'+
1581 * '<option value="-1">All</option>'+
1582 * '</select> records'
1587 "sLengthMenu": "Show _MENU_ entries",
1591 * When using Ajax sourced data and during the first draw when DataTables is
1592 * gathering the data, this message is shown in an empty row in the table to
1593 * indicate to the end user the the data is being loaded. Note that this
1594 * parameter is not used when loading data by server-side processing, just
1595 * Ajax sourced data with client-side processing.
1597 * @default Loading...
1601 * $(document).ready( function() {
1602 * $('#example').dataTable( {
1604 * "sLoadingRecords": "Please wait - loading..."
1609 "sLoadingRecords": "Loading...",
1613 * Text which is displayed when the table is processing a user action
1614 * (usually a sort command or similar).
1616 * @default Processing...
1620 * $(document).ready( function() {
1621 * $('#example').dataTable( {
1623 * "sProcessing": "DataTables is currently busy"
1628 "sProcessing": "Processing...",
1632 * Details the actions that will be taken when the user types into the
1633 * filtering input text box. The variable "_INPUT_", if used in the string,
1634 * is replaced with the HTML text box for the filtering input allowing
1635 * control over where it appears in the string. If "_INPUT_" is not given
1636 * then the input box is appended to the string automatically.
1642 * // Input text box will be appended at the end automatically
1643 * $(document).ready( function() {
1644 * $('#example').dataTable( {
1646 * "sSearch": "Filter records:"
1652 * // Specify where the filter should appear
1653 * $(document).ready( function() {
1654 * $('#example').dataTable( {
1656 * "sSearch": "Apply filter _INPUT_ to table"
1661 "sSearch": "Search:",
1665 * All of the language information can be stored in a file on the
1666 * server-side, which DataTables will look up if this parameter is passed.
1667 * It must store the URL of the language file, which is in a JSON format,
1668 * and the object has the same properties as the oLanguage object in the
1669 * initialiser object (i.e. the above parameters). Please refer to one of
1670 * the example language files to see how this works in action.
1672 * @default <i>Empty string - i.e. disabled</i>
1676 * $(document).ready( function() {
1677 * $('#example').dataTable( {
1679 * "sUrl": "http://www.sprymedia.co.uk/dataTables/lang.txt"
1688 * Text shown inside the table records when the is no information to be
1689 * displayed after filtering. sEmptyTable is shown when there is simply no
1690 * information in the table at all (regardless of filtering).
1692 * @default No matching records found
1696 * $(document).ready( function() {
1697 * $('#example').dataTable( {
1699 * "sZeroRecords": "No records to display"
1704 "sZeroRecords": "No matching records found"
1709 * This parameter allows you to have define the global filtering state at
1710 * initialisation time. As an object the "sSearch" parameter must be
1711 * defined, but all other parameters are optional. When "bRegex" is true,
1712 * the search string will be treated as a regular expression, when false
1713 * (default) it will be treated as a straight string. When "bSmart"
1714 * DataTables will use it's smart filtering methods (to word match at
1715 * any point in the data), when false this will not be done.
1717 * @extends DataTable.models.oSearch
1721 * $(document).ready( function() {
1722 * $('#example').dataTable( {
1723 * "oSearch": {"sSearch": "Initial search"}
1727 "oSearch": $.extend( {}, DataTable.models.oSearch ),
1731 * By default DataTables will look for the property 'aaData' when obtaining
1732 * data from an Ajax source or for server-side processing - this parameter
1733 * allows that property to be changed. You can use Javascript dotted object
1734 * notation to get a data source for multiple levels of nesting.
1738 * @dtopt Server-side
1741 * // Get data from { "data": [...] }
1742 * $(document).ready( function() {
1743 * var oTable = $('#example').dataTable( {
1744 * "sAjaxSource": "sources/data.txt",
1745 * "sAjaxDataProp": "data"
1750 * // Get data from { "data": { "inner": [...] } }
1751 * $(document).ready( function() {
1752 * var oTable = $('#example').dataTable( {
1753 * "sAjaxSource": "sources/data.txt",
1754 * "sAjaxDataProp": "data.inner"
1758 "sAjaxDataProp": "aaData",
1762 * You can instruct DataTables to load data from an external source using this
1763 * parameter (use aData if you want to pass data in you already have). Simply
1764 * provide a url a JSON object can be obtained from. This object must include
1765 * the parameter 'aaData' which is the data source for the table.
1769 * @dtopt Server-side
1772 * $(document).ready( function() {
1773 * $('#example').dataTable( {
1774 * "sAjaxSource": "http://www.sprymedia.co.uk/dataTables/json.php"
1778 "sAjaxSource": null,
1782 * This parameter can be used to override the default prefix that DataTables
1783 * assigns to a cookie when state saving is enabled.
1785 * @default SpryMedia_DataTables_
1789 * $(document).ready( function() {
1790 * $('#example').dataTable( {
1791 * "sCookiePrefix": "my_datatable_",
1795 "sCookiePrefix": "SpryMedia_DataTables_",
1799 * This initialisation variable allows you to specify exactly where in the
1800 * DOM you want DataTables to inject the various controls it adds to the page
1801 * (for example you might want the pagination controls at the top of the
1802 * table). DIV elements (with or without a custom class) can also be added to
1803 * aid styling. The follow syntax is used:
1805 * <li>The following options are allowed:
1807 * <li>'l' - Length changing</li
1808 * <li>'f' - Filtering input</li>
1809 * <li>'t' - The table!</li>
1810 * <li>'i' - Information</li>
1811 * <li>'p' - Pagination</li>
1812 * <li>'r' - pRocessing</li>
1815 * <li>The following constants are allowed:
1817 * <li>'H' - jQueryUI theme "header" classes ('fg-toolbar ui-widget-header ui-corner-tl ui-corner-tr ui-helper-clearfix')</li>
1818 * <li>'F' - jQueryUI theme "footer" classes ('fg-toolbar ui-widget-header ui-corner-bl ui-corner-br ui-helper-clearfix')</li>
1821 * <li>The following syntax is expected:
1823 * <li>'<' and '>' - div elements</li>
1824 * <li>'<"class" and '>' - div with a class</li>
1825 * <li>'<"#id" and '>' - div with an ID</li>
1830 * <li>'<"wrapper"flipt>'</li>
1831 * <li>'<lf<t>ip>'</li>
1836 * @default lfrtip <i>(when bJQueryUI is false)</i> <b>or</b>
1837 * <"H"lfr>t<"F"ip> <i>(when bJQueryUI is true)</i>
1841 * $(document).ready( function() {
1842 * $('#example').dataTable( {
1843 * "sDom": '<"top"i>rt<"bottom"flp><"clear">'
1851 * DataTables features two different built-in pagination interaction methods
1852 * ('two_button' or 'full_numbers') which present different page controls to
1853 * the end user. Further methods can be added using the API (see below).
1855 * @default two_button
1859 * $(document).ready( function() {
1860 * $('#example').dataTable( {
1861 * "sPaginationType": "full_numbers"
1865 "sPaginationType": "two_button",
1869 * Enable horizontal scrolling. When a table is too wide to fit into a certain
1870 * layout, or you have a large number of columns in the table, you can enable
1871 * x-scrolling to show the table in a viewport, which can be scrolled. This
1872 * property can be any CSS unit, or a number (in which case it will be treated
1873 * as a pixel measurement).
1875 * @default <i>blank string - i.e. disabled</i>
1879 * $(document).ready( function() {
1880 * $('#example').dataTable( {
1881 * "sScrollX": "100%",
1882 * "bScrollCollapse": true
1890 * This property can be used to force a DataTable to use more width than it
1891 * might otherwise do when x-scrolling is enabled. For example if you have a
1892 * table which requires to be well spaced, this parameter is useful for
1893 * "over-sizing" the table, and thus forcing scrolling. This property can by
1894 * any CSS unit, or a number (in which case it will be treated as a pixel
1897 * @default <i>blank string - i.e. disabled</i>
1901 * $(document).ready( function() {
1902 * $('#example').dataTable( {
1903 * "sScrollX": "100%",
1904 * "sScrollXInner": "110%"
1908 "sScrollXInner": "",
1912 * Enable vertical scrolling. Vertical scrolling will constrain the DataTable
1913 * to the given height, and enable scrolling for any data which overflows the
1914 * current viewport. This can be used as an alternative to paging to display
1915 * a lot of data in a small area (although paging and scrolling can both be
1916 * enabled at the same time). This property can be any CSS unit, or a number
1917 * (in which case it will be treated as a pixel measurement).
1919 * @default <i>blank string - i.e. disabled</i>
1923 * $(document).ready( function() {
1924 * $('#example').dataTable( {
1925 * "sScrollY": "200px",
1926 * "bPaginate": false
1934 * Set the HTTP method that is used to make the Ajax call for server-side
1935 * processing or Ajax sourced data.
1939 * @dtopt Server-side
1942 * $(document).ready( function() {
1943 * $('#example').dataTable( {
1944 * "bServerSide": true,
1945 * "sAjaxSource": "scripts/post.php",
1946 * "sServerMethod": "POST"
1950 "sServerMethod": "GET"