On the DataTables blog you will find news, announcements and tutorials about DataTables and its suite of extensions. New posts are published monthly, with additional news items in between.

7th Apr 2017

RowGroup - new extension

Grouping rows into sets of data that share a single characteristic can be very powerful tool to let end user's understand and take knowledge from a complex data set. A DataTable will provide a base grouping (for example showing a list of students), but you might also wish to group by a data point inside the table (e.g. age in the case of the students example).

The DataTables examples have long included an example showing how row grouping can be done, but any customisation requires modification of the code presented that, and it isn't always intuitive what those changes should be if the developer is new to DataTables. As such, it gives me great pleasure to introduce a new extension for DataTables: RowGroup.

Name Position Office Salary

Continue reading...

31st Mar 2017

Ajax loaded row details

Showing detailed information about a row in a DataTable is a popular feature. It allows the main table view to be accessible and easy for the end user to process, while also allowing them to drill into more detailed data in a structured way.

DataTables provides child rows API methods (row().child(), row().child().show(), etc) to let you easily display detail rows such as these. There is even a simple example on this site.

The topic for this post is to built upon that example, describing how to handle a simple, but commonly requested, extension to it: to load the data for the child row asynchronously via Ajax rather than simply using the data already in the table.

The table below shows an example of what we will build in this article. Clicking on the show icon will display a "Loading" message, which is then replaced by data that has been Ajax loaded from the server. In this demo an artificial two second delay has been added to the server-side script so you can see the loading message and that then being replaced by the loaded information.

Name Position Office Salary
Name Position Office Salary

Continue reading...

28th Feb 2017

Locale based sorting

Let's stereotype for a moment: developers whose first (and in many cases, such as my own, only) language is English, don't always appreciate localisation issues to the degree we should. With people using DataTables all over the world (68 community translations for DataTables core) this is something that I'm very aware of as a library developer.

While DataTables offers options for localisation of the text it uses, we also need to consider the data that the table contains. Sorting is one area where this has proven to be particularly difficult to get right, but fortunately with new Javascript APIs that are now available in browsers, we can get locale based sorting absolutely right every time.

Also, don't make the mistake of thinking that this post is only for developers who are working in languages other than English - the sorting options made available by the Intl API offer something for everyone!

Continue reading...

Historic blog posts