DataTables 2!
It is with real pleasure that I announce the general availability of DataTables 2. It has been a long time in coming, with aspects of its development starting in 2018, but it is finally here now and I think it is a great step forward for DataTables, with new options, API methods, and plenty of refinements and general improvements.
What is DataTables
If you are reading this, you most likely know what DataTables is, but just in case you don't, it is a free open source Javascript library to enhance HTML tables. In its simplest form it adds ordering, search, and paging to any HTML table, but it can do so much more. Its extensive API and options makes it possible to customise and control the table to suit your needs. It can also be styled by several of the major CSS frameworks to have it fit into your website / application seamlessly.
There are also a wide range of extensions for DataTables which add additional capabilities such as creating export files, freezing headers and columns and plenty more. We also produce Editor for DataTables, our commercial software which adds full create, edit and delete operations to DataTables along with server-side libraries to make CRUD simple.
New in 2.0
There are a lot of small additions and improvements in DataTables, but there are a few of headline features that improve its capabilities:
- The new
layoutoption - Improved search abilities
- Entries language option
For the discussion of these features below we'll refer to the following DataTable:
| Name | Position | Office | Salary |
|---|---|---|---|
| Tiger Nixon | System Architect | Edinburgh | $320,800 |
| Garrett Winters | Accountant | Tokyo | $170,750 |
| Ashton Cox | Junior Technical Author | San Francisco | $86,000 |
| Cedric Kelly | Senior Javascript Developer | Edinburgh | $433,060 |
| Airi Satou | Accountant | Tokyo | $162,700 |
| Brielle Williamson | Integration Specialist | New York | $372,000 |
| Herrod Chandler | Sales Assistant | San Francisco | $137,500 |
| Rhona Davidson | Integration Specialist | Tokyo | $327,900 |
| Colleen Hurst | Javascript Developer | San Francisco | $205,500 |
| Sonya Frost | Software Engineer | Edinburgh | $103,600 |
| Jena Gaines | Office Manager | London | $90,560 |
| Quinn Flynn | Support Lead | Edinburgh | $342,000 |
| Charde Marshall | Regional Director | San Francisco | $470,600 |
| Haley Kennedy | Senior Marketing Designer | London | $313,500 |
| Tatyana Fitzpatrick | Regional Director | London | $385,750 |
| Michael Silva | Marketing Designer | London | $198,500 |
| Paul Byrd | Chief Financial Officer (CFO) | New York | $725,000 |
| Gloria Little | Systems Administrator | New York | $237,500 |
| Bradley Greer | Software Engineer | London | $132,000 |
| Dai Rios | Personnel Lead | Edinburgh | $217,500 |
| Jenette Caldwell | Development Lead | New York | $345,000 |
| Yuri Berry | Chief Marketing Officer (CMO) | New York | $675,000 |
| Caesar Vance | Pre-Sales Support | New York | $106,450 |
| Doris Wilder | Sales Assistant | Sydney | $85,600 |
| Angelica Ramos | Chief Executive Officer (CEO) | London | $1,200,000 |
| Gavin Joyce | Developer | Edinburgh | $92,575 |
| Jennifer Chang | Regional Director | Singapore | $357,650 |
| Brenden Wagner | Software Engineer | San Francisco | $206,850 |
| Fiona Green | Chief Operating Officer (COO) | San Francisco | $850,000 |
| Shou Itou | Regional Marketing | Tokyo | $163,000 |
| Michelle House | Integration Specialist | Sydney | $95,400 |
| Suki Burks | Developer | London | $114,500 |
| Prescott Bartlett | Technical Author | London | $145,000 |
| Gavin Cortez | Team Leader | San Francisco | $235,500 |
| Martena Mccray | Post-Sales support | Edinburgh | $324,050 |
| Unity Butler | Marketing Designer | San Francisco | $85,675 |
| Howard Hatfield | Office Manager | San Francisco | $164,500 |
| Hope Fuentes | Secretary | San Francisco | $109,850 |
| Vivian Harrell | Financial Controller | San Francisco | $452,500 |
| Timothy Mooney | Office Manager | London | $136,200 |
| Jackson Bradshaw | Director | New York | $645,750 |
| Olivia Liang | Support Engineer | Singapore | $234,500 |
| Bruno Nash | Software Engineer | London | $163,500 |
| Sakura Yamamoto | Support Engineer | Tokyo | $139,575 |
| Thor Walton | Developer | New York | $98,540 |
| Finn Camacho | Support Engineer | San Francisco | $87,500 |
| Serge Baldwin | Data Coordinator | Singapore | $138,575 |
| Zenaida Frank | Software Engineer | New York | $125,250 |
| Zorita Serrano | Software Engineer | San Francisco | $115,000 |
| Jennifer Acosta | Junior Javascript Developer | Edinburgh | $75,650 |
| Cara Stevens | Sales Assistant | New York | $145,600 |
| Hermione Butler | Regional Director | London | $356,250 |
| Lael Greer | Systems Administrator | London | $103,500 |
| Jonas Alexander | Developer | San Francisco | $86,500 |
| Shad Decker | Regional Director | Edinburgh | $183,000 |
| Michael Bruce | Javascript Developer | Singapore | $183,000 |
| Donna Snider | Customer Support | New York | $112,000 |
This table is initialised with:
new DataTable('#newFeatures', {
language: {
entries: {
_: 'people',
1: 'person'
}
},
layout: {
topStart: 'info',
bottomStart: 'pageLength'
}
});
Layout
Custom positioning of the table's control elements, and the addition of others such as Buttons is probably the most common configuration option used. In DataTables 1.x this was achieved through the use of the dom string, which can quickly become unwieldy when used with styling integrations such as Bootstrap. DataTables 2 resolves this with the new layout option which can be used to place control elements around the table in a common object definition, regardless of the styling library used.
In the example above I've swapped the location of the table info and paging length controls from their default positions. This is very simply done with:
layout: {
topStart: 'info',
bottomStart: 'pageLength'
}
However, the utility of layout doesn't stop there, it allows the configuration of each control element (which is termed a "feature" in DataTables) on an individual basis. This makes it trivial to have multiple instances of each feature, particularly useful for Buttons - e.g. you might use:
new DataTable('#myTable', {
layout: {
topStart: {
buttons: [ 'create', 'edit', 'remove' ]
},
topEnd: {
buttons: [ 'excel', 'csv' ]
}
}
});
Furthermore, it is easy to create new features to use with layout through the DataTable.feature.register() method.
Finally for layout, this change has allowed me to add an option at the top of all of the example pages to let you select which of our supported styling frameworks you would like to see the example in.
Search
Strong search abilities are fundamentally important in any library that is designed to show large amounts of data, and DataTables 2 builds on the existing abilities of DataTables.
The built-in standard "smart" search now has the ability to perform a negation search by adding a leading exclamation mark (!) to a search term. Try typing "!London" in the table above to remove all rows with London in it for example. Additionally, there are now options for exact matching of strings (useful for column search) and boundary search (to help filter when data contains terms such as male and female).
The search ability of the API (search() and column().search()) has also been improved for custom searching. They now have the ability to accept a function that will perform your own custom search logic on the table's data, and to accept a regular expression directly.
Finally, for search, DataTables 2 introduces a new concept of fixed search terms through three new methods:
With these methods, you create a fixed search term (indexed by a given name) which will be applied along with any other search terms, until either replaced or removed. This makes building custom search controls (along with the new feature registration for layout) much easier since you don't need to worry about search terms conflicting and overriding existing terms.
As an example, you could apply the following event handler and search to a select element to filter the table, while also leaving the built-in global search input free for the end user to enter freeform search terms:
$('#mySelect').on('change', function () {
table.search.fixed('select', $(this).val());
});
Entries
DataTables 2 introduces a new language.entries option, which is used to customise the language strings used by DataTables for the control features (e.g. the page length and information display elements). While this is a relatively small change, it can greatly increase the relevance of the table to the end user when they can scan the data - rather than seeing the generic "entries" string they can see immediately what type of data the table contains.
In the example above, the following is used:
language: {
entries: {
_: 'people',
1: 'person'
}
}
Note how it also uses the i18n() method's ability to support pluralisation, so if only a single result is shown it would be referred to as the singular term, rather than incorrectly with the plural. Try searching the table above for a unique term to see this in action.
More...
This blog post just skims the surface of the new abilities of DataTables 2. For more details please refer to:
Upgrading
Tempted to upgrade? Excellent! It's easy to do so. If you are using npm, yarn, or another package manager, update your dependencies to use DataTables 2 (^2 is probably the best semver version string to use). If you use our CDN or downloaded packages, use the download builder to build a new CDN link / download package (if you check the Javascript source file for your current build, you will see a URL in a comment at the top, which will ensure you get the same software, just the latest versions of it).
If you are using DataTables directly (i.e. the jquery.dataTables.js file), please note that the name for this file has been updated to be simply dataTables.js. Equally, the core styling file name has been updated to be consistent with the other styling file names and is dataTables.dataTables.css:
Class names
The class names that DataTables uses for the elements it adds to the table have been updated to be more consistent, and to be sane (unlike previous versions!). DataTables 1.x had class names that had accumulated over time, and were a bit of a hodge-podge. They are now a lot more consistent in how they are named. They will start with dt- to indicate they are DataTables specific.
If you have been using custom styling with the old DataTables class names, you will need to update your CSS for the new names.
Removed
The release of a major new version is the opportunity for a library to remove legacy code and interfaces, to keep the library manageable and, particularly important in a Javascript library, as small as realistically possible. This has to be balanced with the need for backwards compatibility and making the process of upgrading the software as painless as possible.
With this in mind, there are two major removals in DataTables 2: the legacy API and the old deferLoading option.
The legacy API was succeeded by the current DataTables API with the release of DataTables 1.10 in 2014 (in retrospect, that should really have been called DT2!). It was kept in the code base to allow upgrades, but it has been marked as deprecated ever since and only documented on the legacy pages. The legacy API is easy to identify through the prefix fn on all of its methods - e.g. fnDraw, fnAddData, etc.
The legacy API, although an abstraction layer to the modern API, still took a considerable amount of code and has now been removed. If you used it, you must now update your code to the modern API.
The other removal worth noting here is the deferLoading option, which allowed DataTables to skip the first draw, under the assumption that you have performed all initial search and ordering operations to show the first page of data. This was useful in the days when search engines couldn't execute Javascript, but they have long since passed, and very few installs of DataTables used this option due to the additional setup complexity. There were also a large number of edge cases with it (state saving, etc), so it was time for it to be removed.
There are a few other minor removals, and for them please refer to the DataTables 2 upgrade notes.
Extension releases
It isn't just DataTables that benefits from this major release, but also a lot of the extensions for DataTables have been updated to make use of its new abilities, particularly the multi-row header support.
- Buttons 3: Now fully supports multi-row and complex headers and footers for exporting data. Release notes.
- ColReorder 2: A complete rewrite, modernising the code base to make it much smaller and more manageable. Also fully supports multi-row and complex headers / footers. Release notes.
- FixedColumns 5: Shows a shadow on the fixed columns when scrolling to help visual separation. Also supports multi-row and complex headers / footers. Release notes.
- FixedHeader 4: Support for multi-row and complex headers / footers. Release notes.
- Responsive 3: As with the other extensions, Responsive also now has full support for multi-row and complex headers / footers. It also introduces a new renderer which will reuse DOM elements, rather than creating new ones for the details display. Release notes.
- Select 2: Introduces support for selecting rows with real checkboxes, rather than CSS drawn ones, to help improve accessibility. Also has an option to select all / none in a checkbox column. Release notes.
The other extensions have also seen updates to ensure full compatibility with DataTables 2.
As with DataTables core, please use your package manager (npm, yarn, etc) or the download builder to make sure you get the latest versions from the DataTables suite of software.
Full upgrade notes
This is not a comprehensive list of changes, but rather just the main points. For full details, please refer to:
Support
DataTables 1.x is now considered end-of-life. There will be patch releases if required, however, all development focus is on DataTables 2+ and no new features will be introduced to 1.x, nor backported. The same applies to the extensions which require DataTables 2+, while the other extensions that operate with both DataTables 1 and 2 will see focus specifically for DataTables 2 and will at some point drop support for DataTables 1 (they will get a major version bump when that happens).
The commercial support offerings will continue to cover DataTables 1.13 as the previous minor version, until such time that DataTables 2.1 is released. However, the free support offered in the forum will move focus to DataTables 2 and you will be encouraged to upgrade if you encounter issues with older versions.
Browsers
Wide browser support is very important for a library such as DataTables. You want to be able to select a library and know that it will just work on the browsers that your customers will be using, without worrying about compatibility. Previously I set the baseline as a particular version of Internet Explorer (6, 8, 11, etc) at each minor release of DataTables (minor in the semver sense - some of them, such as 1.10 were big upgrades!).
The browser landscape has changed since DataTables first came onto the scene - IE is long since dead and browsers are regularly updated automatically so you know that most of your customers will have the latest and greatest features. The "most" is important, the long tail of browser versions can still wag (computers with old operating systems, legacy tablets, etc), and as noted above, you want to be sure that the libraries you use have wide browser support.
To that end, DataTables browser support is now for the major browsers that were released 10 years before the release date of each DataTables minor version series.
jQuery
DataTables 2 has a single dependency - jQuery. It uses jQuery as a DOM abstraction and event handling library. Just in the same way as DataTables is used as a library to work with HTML tables, it uses jQuery to vastly simplify interactions with the DOM and events. If jQuery wasn't used, I'd need to write a similar DOM abstraction that would simply take time away from core DataTables development, and I think it would be unlikely to benefit code size significantly, particularly with jQuery slim and the upcoming jQuery 4 release. jQuery is a battle-tested library, and is a significant part of why DataTables can offer such wide browser support.
To be clear - you do not need to write any jQuery code to use DataTables. All of our examples now have Vanilla JS and jQuery run time code to show you how to use either method. The reference documentation focuses on Vanilla JS.
The future
Very rarely can software be considered "finished", and DataTables is nowhere near that point. I have a wide range of plans for DataTables and its extensions, including improved column control, filtering options, performance, integration with React, and a lot more. Indeed, I've already got tickets logged for DataTables 3 features! Keep an eye on this blog (RSS feed) or the DataTables BlueSky account to keep up to date with the latest developments.
I've been working on DataTables since 2008, and now 16 years later I'm delighted and proud of what it has become and the community that has developed around it. My greatest wish is to continue iterating and developing DataTables to serve the needs of the developers who use it. I welcome your feedback on DataTables 2 and in general - please feel free to create a thread in the forum to discuss any ideas, issues, or feedback you might have.