{"id":343,"date":"2014-05-06T13:04:13","date_gmt":"2014-05-06T13:04:13","guid":{"rendered":"http:\/\/www.blogs.hss.ed.ac.uk\/webteam\/?p=343"},"modified":"2014-06-10T09:58:21","modified_gmt":"2014-06-10T09:58:21","slug":"supercharging-html-tables-datatables","status":"publish","type":"post","link":"http:\/\/www.blogs.hss.ed.ac.uk\/digital-innovation\/2014\/05\/06\/supercharging-html-tables-datatables\/","title":{"rendered":"Supercharging HTML tables with DataTables"},"content":{"rendered":"

\"Prototype<\/a>In the CHSS web team we have been building web interfaces that work with large amounts of data harvested from the University’s research database (PURE<\/a>). The crucial thing about these interfaces is that they are ‘display’ interfaces – there is no interactivity with the underlying database as such, no ‘writing’ of the data. The emphasis on the interfaces is on displaying the data in a tabular format, allowing text to be searched and for the display of data to be filtered and sorted by particular fields (or columns).<\/p>\n

Using standard methods of creating a web interface that communicates with a database using something like Perl DBI<\/a> or PHP PDO<\/a> to build a simple display-only interface has quite a few unneccessary overheads in terms of performance and complexity – and it turns out there is a technology that can be used to construct this sort of web interface in a much more simple and lightweight way, using DataTables<\/a>.<\/p>\n

<\/p>\n

DataTables is a plug-in for the jQuery<\/a> JavaScript library, and is ‘client-side’ technology. There is no database, and no requirement even for server-side scripting technologies such as PHP. It’s a good way of displaying a large amount of ‘static’ data, that doesn’t need to change very much (perhaps being updated by some automated nightly re-indexing or harvesting mechanism) and is a monolithic ‘block’ of data (i.e. it is not in an entity-relationship structure).<\/p>\n

DataTables can be thought of as a way of ‘supercharging’ standard HTML tables with extra functionality applied to data contained in a table (searching, filtering, ordering, conditional views and layouts, scrolling, pagination). The data used by DataTable exists in HTML table rows and cells, and all<\/em> the data that is required for the web interface is loaded once when the browser requests the web page containing the interface, along with the web page HTML and JavaScript libraries – all subsequent searching, filtering and ordering of the data is done without further downloads, using client-side JavaScript alone. The DataTables JavaScript recognises the HTML table (which must be in ‘well-formed<\/a>‘ XHTML<\/a>) using the DOM<\/a> and an ‘ID’ attribute in the <table> tag. This is a very different approach from the standard methodology of re-loading the webpage every time a different view of the data is required (or perhaps using JSON<\/a> or AJAX<\/a>) and using a new connection to the database server to perform a new SQL transaction.<\/p>\n

It might be thought that one disadvantage of the DataTables approach would be poor performance and slow loading of web pages that use DataTables with a large amount of data (DataTables automatically generates internal indexes dynamically) – but we have used the plug-in effectively for web interfaces that have hundreds of rows of data. At some point presumably the scale of the data would be such that this would become a problem, but for data on the order of hundreds of (and perhaps a few thousand) rows in size, DataTables seems to work well.<\/p>\n

There is a middle-ground between the simplicity of client-side DataTables and the complexity of a standard web browser client\/RDBMS server model, and that is using a relational database that resides purely on the client-side, such as SQLite<\/a>.<\/p>\n

Examples<\/strong><\/p>\n