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.
By its fundamental nature DataTables operates with repeating data. As developers we naturally want to be able to access and work with that data, processing each item one at a time or manipulating them in some way. This we term iterating or looping over the items. DataTables has a number of built in iteration methods, but if you are new to the DataTables API, it isn't always necessarily obvious which method you should use.
In this post I want to take some time delve into the API and explain the iterators that are built into DataTables and when it is best to use each one. I'll also discuss if there are any penalties for using each iterator (hint - yes, there is usually a trade-off between ease of use and performance).
There are three main iterators in DataTables:
cells().every()- grouped together as they all share the same basic behaviour.
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.