The Problem

Nowadays, towards the end of the 201x years, many web applications still use static HTML tables as major component of their user interface. Here below an example from ]project-open[ (vers. 5.0.2.4.0), a well known and absolutely rich of functions opensource enterprise application for project management.

Static HTML tables are fine when relatively small but, as soon as they are larger than the real estate available on the screen, the header may become not visible when reading rows further down in the table. In the same way, when reading cells in the right portion of the table, significant columns on the left may also become not visible. This requires the end users to continuously jump up and down (or left and right) when reading the table.

The Solution

The solution is very simple and consists in having tables that:

• don’t move (much) on the screen;
• have scrollable content;
• have a fixed header (and a fixed footer if needed);
• have fixed left and/or right columns if needed.

There are many Ajax/jQuery libraries implementing dynamic tables satisfying the above requirements; among these Spazio IT has selected the DataTables jQuery Plug-in, perhaps the most complete.

Under the Hood

All these Ajax/jQuery libraries use internal/hidden tables and divisions to implement dynamic behaviour like scrolling; in so doing they change the original DOM structure of the page, breaking the original code that fetches the forms input data.
Luckily jQuery $() method can be used to get the content of any node disregarding its actual position and a successive Ajax/jQuery call to the server can replace the original form GET/POST call.

The following example shows an extension of ]project-open[ implemented by Spazio IT which has input fields inside a scrollable table.

Ajax/jQuery calls to te server have been implemented using the jQuery Redirect Plug-in.