DataTables

• Usage
• Examples
• Styling
• API
• Development
• Editor
• Extras
• Plug-ins
• Blog
• FAQs
• Forums

Donate

Download v1.9.4

Support 3h 11m avg response

New features in DataTables 1.8

DataTables 1.8 builds on the platform of the previous versions, extending the capability of DataTables to make it much more flexibility for you, the developer, and also building toward the future. While there aren't many changes in the end user interface, you'll find that some of the changes make working with DataTables much more flexible and enjoyable.

Major new features

• Extended data source options:
  Server-side processing with objects demo | Ajax source with objects demo | Objects with sub-arrays demo | Deep data source demo
  Previously when using Ajax, DataTables required a simple 2D array of data for the table, with strict requirements on length. DataTables 1.8 now allows you to give it an array of objects (or still of arrays), with any number of properties you wish. To access the property for a column, use the mDataProp option for the target column. This can be either an integer for an array index (the default) or a string for an object property. Additionally you can use dotted object notation in the string to specify a nested object (of any depth) - for example "object.prop". This is very useful for storing meta information such as either details rows (fnOpen) or database IDs.
• Complex headers:
  Colspan with hidden columns demo
  1.8 introduces super flexible column headers and table footers support. Previously column visibility was not supported with headers which have colspan/rowspan anywhere in them, but now you can group columns and show/hide them as you wish. This is tightly integrated to the core and thus allows the ColVis extra and others to 'just work' with complex headers.
• Performance:
  Referred rendering demo
  When using Ajax or Javascript sourced data, there is now the option to defer (bDeferRender set to true, default false) the creation of the table row and cell DOM elements until they are actually needed for a given page draw. As a result, the provides a massive speed boost during initialisation since your browser doesn't need to create nodes for the table. This allows Ajax sourced tables to deal with many thousands of rows with ease. Note that this has no effect on DOM sourced data, and server-side processing still handled many millions of rows.
• Progressive enhancement (TH elements in the table body):
  With DataTables 1.8, it is now possible to use TH elements in the table's TBODY, which is important from a progressive enhancement point of view since the TH elements have semantic meaning, and additionally it can make the table easier to style with CSS selectors.

Developer enhancements

• Automatic row ID and class addition:
  Automatically adding IDs demo
  It can often be useful to add an ID or a class name directly to a row when using non-DOM sourced data (server-side processing for example). DataTables now provides the option of have it automatically add an ID and/or class to each row by specifying DT_RowId and/or DT_RowClass as part of the object that is used for the row's data source.
• Ajax source data property configuration:
  Ajax custom property data source demo
  When obtaining Ajax data for either Ajax sourced data or server-side processing, you can now specify the parameter that you wish DataTables to read for the table data (this was previously hardcoded as aaData) using the sAjaxDataProp property. Additionally when using Ajax sourced data (not server-side processing) this option can be set to an empty string, which tells DataTables that you are going to give it an array directly, rather than it needing to read a property of an object.
• Empty columns:
  Null data source demo
  In some tables it can be useful to not need to specify any data source for a column, as it's content is automatically generated (for example using fnRender). This is fairly common with add, edit and delete columns for a CRUD interface. You can now use the mDataProp set to null to specify that the column has no data source. DataTables will render this column as empty.
• Accessibility:
  Deferred loading demo
  When using server-side processing, the first thing the table had to do was make a request to the server to get the new data. This is no longer required with the bDeferLoading option set to true (default false). The benefit of this is that you can increase the accessibility of your table by inserting the first display set directly into your HTML and DataTables will build on that.
• Unit tests:
  With the extended options for the data source options introduced in DataTables, it has been important to keep the unit test suite up-to-date. All new initialisation parameters have unit tests, and the test suite now stands at over 2500 tests. As such you can rest assured that DataTables is rock solid.
• fnGetData extended:
  The API method fnGetData now has an additional option to get the data for an individual cell. With just one parameter given to it, fnGetData will get the original data object for the given row (whatever that object might have been, with the new extended data source options). With two parameters, fnGetData will get the data for the row/column given, by reading it from your data source object exactly as it would for the table display.
• Details row more flexible:
  fnOpen has been made more flexible by allowing either a jQuery object, a DOM element or an HTML string to be passed to it (as the second parameter) for insertion into the newly created row.

There are a wide range of bug fixed and internal updates as well as all of these new features. To read the full release notes, please check the release notes.