Friday 15th March, 2024
By Allan Jardine

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 layout option
  • Improved search abilities
  • Entries language option

For the discussion of these features below we'll refer to the following DataTable:

Tiger NixonSystem ArchitectEdinburgh$320,800
Garrett WintersAccountantTokyo$170,750
Ashton CoxJunior Technical AuthorSan Francisco$86,000
Cedric KellySenior Javascript DeveloperEdinburgh$433,060
Airi SatouAccountantTokyo$162,700
Brielle WilliamsonIntegration SpecialistNew York$372,000
Herrod ChandlerSales AssistantSan Francisco$137,500
Rhona DavidsonIntegration SpecialistTokyo$327,900
Colleen HurstJavascript DeveloperSan Francisco$205,500
Sonya FrostSoftware EngineerEdinburgh$103,600
Jena GainesOffice ManagerLondon$90,560
Quinn FlynnSupport LeadEdinburgh$342,000
Charde MarshallRegional DirectorSan Francisco$470,600
Haley KennedySenior Marketing DesignerLondon$313,500
Tatyana FitzpatrickRegional DirectorLondon$385,750
Michael SilvaMarketing DesignerLondon$198,500
Paul ByrdChief Financial Officer (CFO)New York$725,000
Gloria LittleSystems AdministratorNew York$237,500
Bradley GreerSoftware EngineerLondon$132,000
Dai RiosPersonnel LeadEdinburgh$217,500
Jenette CaldwellDevelopment LeadNew York$345,000
Yuri BerryChief Marketing Officer (CMO)New York$675,000
Caesar VancePre-Sales SupportNew York$106,450
Doris WilderSales AssistantSydney$85,600
Angelica RamosChief Executive Officer (CEO)London$1,200,000
Gavin JoyceDeveloperEdinburgh$92,575
Jennifer ChangRegional DirectorSingapore$357,650
Brenden WagnerSoftware EngineerSan Francisco$206,850
Fiona GreenChief Operating Officer (COO)San Francisco$850,000
Shou ItouRegional MarketingTokyo$163,000
Michelle HouseIntegration SpecialistSydney$95,400
Suki BurksDeveloperLondon$114,500
Prescott BartlettTechnical AuthorLondon$145,000
Gavin CortezTeam LeaderSan Francisco$235,500
Martena MccrayPost-Sales supportEdinburgh$324,050
Unity ButlerMarketing DesignerSan Francisco$85,675
Howard HatfieldOffice ManagerSan Francisco$164,500
Hope FuentesSecretarySan Francisco$109,850
Vivian HarrellFinancial ControllerSan Francisco$452,500
Timothy MooneyOffice ManagerLondon$136,200
Jackson BradshawDirectorNew York$645,750
Olivia LiangSupport EngineerSingapore$234,500
Bruno NashSoftware EngineerLondon$163,500
Sakura YamamotoSupport EngineerTokyo$139,575
Thor WaltonDeveloperNew York$98,540
Finn CamachoSupport EngineerSan Francisco$87,500
Serge BaldwinData CoordinatorSingapore$138,575
Zenaida FrankSoftware EngineerNew York$125,250
Zorita SerranoSoftware EngineerSan Francisco$115,000
Jennifer AcostaJunior Javascript DeveloperEdinburgh$75,650
Cara StevensSales AssistantNew York$145,600
Hermione ButlerRegional DirectorLondon$356,250
Lael GreerSystems AdministratorLondon$103,500
Jonas AlexanderDeveloperSan Francisco$86,500
Shad DeckerRegional DirectorEdinburgh$183,000
Michael BruceJavascript DeveloperSingapore$183,000
Donna SniderCustomer SupportNew York$112,000

This table is initialised with:

new DataTable('#newFeatures', {
    language: {
        entries: {
            _: 'people',
            1: 'person'
    layout: {
        topStart: 'info',
        bottomStart: 'pageLength'


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.


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 () {'select', $(this).val());


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.


This blog post just skims the surface of the new abilities of DataTables 2. For more details please refer to:


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.


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:


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.


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.


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.