Data table plays an important part in most websites, particularly the websites that are for data analysis and information retrieval. A data table add-on is a web application component that allows to render data on web page in table layout, supporting either sorting, filtering, paging or rearranging the data. A number of such plugins have been developed and used by numerous active websites.

Data table plugins - state of the art

Among the 15 best data table plugins to date, TableSorter, FlexiGrid and uiTableFilter provide neat table layouts with sorting, filtering and pagination supports. They however work only on client-side, the entire table content needs to be downloaded to client to be shown. They are therefore inapplicable in websites where generating of table content is time or computer resource consuming.

This drawback was addressed in the Ingrid and Datatable plugins by using server-side scripting to feed the client with data in small chunks, each per client request. In case a large data are retrieved by client, only a small part of the data will be downloaded at a time based on the client’s activity. That makes both the client-side and server-side work faster and the display of data smooth.

The common limitations of the existing data table plugins using both client-side and server-side scripting, including Ingrid and Datatable, are that they do not support multiple-column data filter. For each sortable column, definition of the value to be sorted is complicated, or impossible if the column content is complex. These plugins cannot handle more than one data table per page unless extra coding is done. They therefore cannot support view of neither nested nor master-slave data tables. In case of having multiple data tables per page, they require using session or cookie storage of which the values may be lost because of session timeouts or other client scripts, resulting in improper access or update to the table contents. Because the table contents and the entire web page content can be loaded asynchronously, use of client script to load table contents may conflict with the loading of the entire page content, particularly time-consuming data table contents, making them reloaded multiple times.

To address these shortcomings, we developed lntTblView, a data table add-on for web application using both client side and server side scripting with Ajax technology. The key advantages of lntTblView over the existing data table plugins are that it is easy to use, not using neither session nor cookie storage but allowing multiple tables per page, including nested and master-slave views of the tables.

Demonstrations

This web page uses lntTblView to display the list of biological pathways with pagination and sorting supports. Please jump to the first page and click on the link #5, tpo signaling pathway, a list of pathway components will be shown in tabular format. This nested-table view demonstrates the capability of lntTblView in displaying multiple tables per web page. The following server-side script in PHP language, no client script required, is used to generate the web page content,

require_once(‘lnttblview. ' . $lnt_php_ext);
$tblMeta = array(
array('title'=>'No.','style'=>'column-styles','exp'=>'column-val',
      'sort'=>false),
array('title'=>'taxid','style'=>'column-styles','exp'=>'column-val'),
array('title'=>'pathway','style'=>'column-styles','exp'=>'column-val'),
array('title'=>'org.id','style'=>'column-styles','exp'=>'column-val'),
array('title'=>'source','style'=>'column-styles','exp'=>'column-val')
);
$db=new lntTableView();
$db->Render("sql-statement", 19 /*#rows*/, $tblMeta, 'table-width');

To check some features of lntTblView, you may want to visit this page, enter "long term" under pathway, then select "GO", you can see lntTblView accepting checkbox and link controls in its content. Please visit this page and select "GO", you can find lntTblView also supporting multiple themes. Just take a look at an example of using DataTables plugin, a lot of coding for just a simple problem. To have this done using lntTblView, please check the server-side script below, again no client-side script is needed.

require_once(‘lnttblview. ' . $lnt_php_ext);
$sQuery = "SELECT SQL_CALC_FOUND_ROWS `" . 
   str_replace(" , ", " ", implode("`, `", $aColumns))."`
   FROM   $sTable";
$tblMeta = array(
array('title'=>'Rendering engine','style'=>'...','exp'=>'<%engine%>'),
array('title'=>'Browser','style'=>'...','exp'=>'<%browser%>'),
array('title'=>'Platform','style'=>'...','exp'=>'<%platform%>'),
array('title'=>'version','style'=>'...','exp'=>'<%version%>'),
array('title'=>'CSS grade','style'=>'...','exp'=>'<%grade%>')
);
$db=new lntTableView();
$db->Render($sQuery, 10 /*#rows*/, $tblMeta, 'table-width');

View content of an array— It is very easy to show the content of an array in tabular format using lntTblView. Please check the following script:

require_once(‘lnttblview. ' . $lnt_php_ext);
$tblinfo = array(
 array('title'=>'No.','exp'=>'<%#%>',
       'style'=>'width:30px;text-align:center', 'sort'=>false),
 array('title'=>'So 1','exp'=>'<%bon%>',
       'style'=>'width:30px;text-align:center', 'sort'=>false),
 array('title'=>'So 2','exp'=>'<%ba%>',
       'style'=>'width:30px;text-align:center', 'sort'=>false)
);
$db = new lntTableView();
$a = array(
 array(1,2,3,4),
 array(1,2,3,4),
 array(1,2,3,4),
 array(1,2,3,4),
 array(1,2,3,4),
 array(1,2,3,4),
 array(1,2,3,4),
 array(1,2,3,4)
);
$b=array('One',false,'Three','Four');
$cnt = $db->arrayContentCreate($a, $b);
$db->Render($cnt, 100, $tblinfo, 90);
exit;

lntTblView - a new method for data table view

1. Approach- We have been working with the data table view problem for many web projects on multiple web platforms. We learn the problem thoroughly, completely understand it, model it correctly and finally implement the lntTblView add-on.
2. Model- Just look into the source code of DataTables example, many things need to be done parallelly on both sides following a client-server communication protocol, including the dynamic generating of the SQL statement and database manipulation. These are in fact done in lntTblView though we did it differently and more effectively, as you are at least not getting headache when looking into lntTblView samples.
3. Programming technique- We use OOP (object-oriented programming) method to implement lntTblView. OOP inheritance prevents you from reinventing the wheel, OOP encapsulation hides the standard and complex coding parts, just leaving the simple and flexible ones on your end, so does lntTblView in this case. We have lntMySql class to take care of MySql database manipulation, and lntTblView, inheriting from lntMySql, to take care of data table layout and client-server communication. Thanks to our experience in network games, network based software and information systems development, setting up a client-server communication protocol and a dynamic SQL statement generator for this problem was properly done.

Use of lntTblView is absolutely easy!

If you are doing a data analysis job and want to publish your work results online, lntTblView is there for you. You just need to think about the way to retrieve the data, lntTblView will do the rest.

Thank you for stopping by and reading this article!