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.
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.
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.
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.
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.
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!