DataTables logo DataTables

via Ad Packs

Features

By default the majority of features that DataTables provides are enabled, such that a richly interactive table is presented to end users. However, you may wish to disable various features to customise DataTables to your specific application. This is possible using the following initialisation parameters.

bAutoWidth
Show details

Enable or disable automatic column width calculation. This can be disabled as an optimisation (it takes some time to calculate the widths) if the tables widths are passed in using aoColumns.
Default: true
Type: boolean
Code example: 
   $(document).ready( function () {
     $('#example').dataTable( {
       "bAutoWidth": false
     } );
   } );
bDeferRender
Show details

Deferred rendering can provide DataTables with a huge speed boost when you are using an Ajax or JS data source for the table. This option, when set to true, will cause DataTables to defer the creation of the table elements for each row until they are needed for a draw - saving a significant amount of time.
Default: false
Type: boolean
Code example: 
   $(document).ready( function() {
     var oTable = $('#example').dataTable( {
       "sAjaxSource": "sources/arrays.txt",
       "bDeferRender": true
     } );
   } );
bFilter
Show details

Enable or disable filtering of data. Filtering in DataTables is "smart" in that it allows the end user to input multiple words (space separated) and will match a row containing those words, even if not in the order that was specified (this allow matching across multiple columns). Note that if you wish to use filtering in DataTables this must remain 'true' - to remove the default filtering input box and retain filtering abilities, please use {@link DataTable.defaults.sDom}.
Default: true
Type: boolean
Code example: 
   $(document).ready( function () {
     $('#example').dataTable( {
       "bFilter": false
     } );
   } );
bInfo
Show details

Enable or disable the table information display. This shows information about the data that is currently visible on the page, including information about filtered data if that action is being performed.
Default: true
Type: boolean
Code example: 
   $(document).ready( function () {
     $('#example').dataTable( {
       "bInfo": false
     } );
   } );
bJQueryUI
Show details

Enable jQuery UI ThemeRoller support (required as ThemeRoller requires some slightly different and additional mark-up from what DataTables has traditionally used).
Default: false
Type: boolean
Code example: 
   $(document).ready( function() {
     $('#example').dataTable( {
       "bJQueryUI": true
     } );
   } );
bLengthChange
Show details

Allows the end user to select the size of a formatted page from a select menu (sizes are 10, 25, 50 and 100). Requires pagination (bPaginate).
Default: true
Type: boolean
Code example: 
   $(document).ready( function () {
     $('#example').dataTable( {
       "bLengthChange": false
     } );
   } );
bPaginate
Show details

Enable or disable pagination.
Default: true
Type: boolean
Code example: 
   $(document).ready( function () {
     $('#example').dataTable( {
       "bPaginate": false
     } );
   } );
bProcessing
Show details

Enable or disable the display of a 'processing' indicator when the table is being processed (e.g. a sort). This is particularly useful for tables with large amounts of data where it can take a noticeable amount of time to sort the entries.
Default: false
Type: boolean
Code example: 
   $(document).ready( function () {
     $('#example').dataTable( {
       "bProcessing": true
     } );
   } );
bScrollInfinite
Show details

Enable infinite scrolling for DataTables (to be used in combination with sScrollY). Infinite scrolling means that DataTables will continually load data as a user scrolls through a table, which is very useful for large dataset. This cannot be used with pagination, which is automatically disabled. Note - the Scroller extra for DataTables is recommended in in preference to this option.
Default: false
Type: boolean
Code example: 
   $(document).ready( function() {
     $('#example').dataTable( {
       "bScrollInfinite": true,
       "bScrollCollapse": true,
       "sScrollY": "200px"
     } );
   } );
bServerSide
Show details

Configure DataTables to use server-side processing. Note that the sAjaxSource parameter must also be given in order to give DataTables a source to obtain the required data for each draw.
Default: false
Type: boolean
Code example: 
   $(document).ready( function () {
     $('#example').dataTable( {
       "bServerSide": true,
       "sAjaxSource": "xhr.php"
     } );
   } );
bSort
Show details

Enable or disable sorting of columns. Sorting of individual columns can be disabled by the "bSortable" option for each column.
Default: true
Type: boolean
Code example: 
   $(document).ready( function () {
     $('#example').dataTable( {
       "bSort": false
     } );
   } );
bSortClasses
Show details

Enable or disable the addition of the classes 'sorting_1', 'sorting_2' and 'sorting_3' to the columns which are currently being sorted on. This is presented as a feature switch as it can increase processing time (while classes are removed and added) so for large data sets you might want to turn this off.
Default: true
Type: boolean
Code example: 
   $(document).ready( function () {
     $('#example').dataTable( {
       "bSortClasses": false
     } );
   } );
bStateSave
Show details

Enable or disable state saving. When enabled a cookie will be used to save table display information such as pagination information, display length, filtering and sorting. As such when the end user reloads the page the display display will match what thy had previously set up.
Default: false
Type: boolean
Code example: 
   $(document).ready( function () {
     $('#example').dataTable( {
       "bStateSave": true
     } );
   } );
sScrollX
Show details

Enable horizontal scrolling. When a table is too wide to fit into a certain layout, or you have a large number of columns in the table, you can enable x-scrolling to show the table in a viewport, which can be scrolled. This property can be 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%",
       "bScrollCollapse": true
     } );
   } );
sScrollY
Show details

Enable vertical scrolling. Vertical scrolling will constrain the DataTable to the given height, and enable scrolling for any data which overflows the current viewport. This can be used as an alternative to paging to display a lot of data in a small area (although paging and scrolling can both be enabled at the same time). This property can be 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( {
       "sScrollY": "200px",
       "bPaginate": false
     } );
   } );