While you might not consider a data grid to be all that exciting, they do offer a way for site visitors to interact with large amounts of data and understand it in a way they might not be able to otherwise. One of the most exciting developments in HTML5 is the introduction of a grid element, which allows us to easily create an interactive data grid using only markup. However, it's one of the new elements for which browser support is lagging — there is little, if any, browser support for the time being, and it could be years before we're able to make use of this new element. Luckily, we can use jQuery to fill in the gap until the new grid element is ready for primetime.
In this chapter, we'll learn the following topics:
- Turning an ordinary table into an interactive data grid using the DataTables jQuery plugin from Allan Jardine
- Customizing the appearance and behavior of the data grid with help from the jQuery UI Themeroller
We'll get started by using the DataTables plugin to create a basic data grid, keeping the default settings and the styles provided with the data grid. Data grids are most helpful when we have large amounts of data to present, and site visitors might want to filter and sort the data in different ways to find the information they are looking for. Think, for example, of a list of flights — one site visitor might be interested in sorting the flights by departure time to find the earliest possible departure, while another site visitor might want to sort the flights by duration to find the shortest possible flight.
Presenting the data in an interactive data grid allows each site visitor to quickly and easily find just the information they're looking for in a sea of information. For site visitors with JavaScript disabled, they'll simply see a large table of data and will never know that they're missing out on the interactive features. All of the information will still be available to them.