jQuery Zentable Plugin Example

Zentable is a plug-in for the jQuery Javascript library. It allows to show and manipulate tabulated data on a web page but with functionalities typically expected from native applications, as scrolling with the mouse wheel, resizing column widths or using keys to move through the data. It can be used with or without AJAX, but is using AJAX where this plug-in really shines.

Main features are:

  • Data loaded on demand using AJAX, or embedded in the page.
  • Mouse wheel and keyboard can be also used for scrolling.
  • Column resizing, auto resizing and table resizing
  • Orderable and filtrable by columns.
  • Tooltips
  • Editable
  • Supports HTML as content
  • Themeable by CSS. Supports different styles for rows and columns.

Example 1: static data with surname and name editable.



Usage: This plugin requires Draggable from jQuery UI, jquery mousewheel plugin and jquery timers, all of them bundled with the zentable package, so we include in the header all the scripts and classes needed:
<link rel="stylesheet" type="text/css" href="/css/zentable.css">
<script type="text/javascript" src="/js/jquery.mousewheel.min.js"></script>
<script type="text/javascript" src="/js/jquery-ui-1.7.2.custom.min.js"></script>
<script type="text/javascript" src="/js/jquery.timers-1.1.2.js"></script>
<script type="text/javascript" src="/js/jquery.zentable.min.js"></script>
First create a div with class table in the place where table must show:
<div id="mytable" class="table"></div>
Finally, we invoke the Javascript code that will invoke the plugin:
 $("#zentable").zentable({
    options...
});


Options:There are several options that allow to change table behaviour and customize it:


Methods:

Using zentable with AJAX: For using zentable with AJAX, provide a string with the URL of the AJAX data source. This URL must accept at least these parameters:

start: First row to be retrieved (first one is 0)
pagesize: How many rows retrieve
order: Which column use for order

Additionally, for each filter a new parameter with the name of that filter will be sent in the URL.

The AJAX request is expected to return an XML with the next form:

<data>
    <headers>
        <col id=String [orderable=Boolean] [html=Boolean] [width=Integer]
                [editable=Boolean] [class=String]>(Value)</col>+
    </headers>+
    <row [class=String] >
        <col [link=String]>(Value)</col>+
    </row>+
    [<totals>
        <col>(Value)</col>+
    </totals>]
    <offset>(Value)</offset>
    <totalrows>(Value)</totalrows>
</data>
Brackets mean an optional element, and plus means that the node can be repeated N times. offset will contain the same value as input parameter start, and totalrows contains the total number of rows (not the number of rows contained in the XML, that will be the same as pagesize parameter, but the total number of rows that can be viewed scrolling).