jTable : Understanding User Interface Options

This article is a continuation of my previous articles on jTable, a jQuery plugin for creating AJAX based CRUD tables. Last one in this series explained how to implement AJAX based CRUD operations using jTable in Java Web Applications. There are lot of other cool features jTable offers, which makes this plugin an ideal choice for web developers dealing with CRUD operations. I am talking about the client side UI functionalities this plugin offers reducing the design overhead of adding end user specific features. If you have gone through the official API Reference page that would suffice to understand these features. I am just trying to explain some of them(my favourites) here with screenshots from the Java application I created for my previous post.

1. Animations

animationsEnabled       boolean   default:true 

This option is used to show quick animation when the user tries to delete, update or create a row in the table. You can always turn it off by setting the value to false. I added a new record and once the new record is added to the table, the new row was highlighted for a short while after which the highlight faded away slowly.

loadingAnimationDelay     int   default:500  

jTable loads data to table by firing AJAX call to server side method and hence if the ajax operations takes some time to complete, jTable updates the user with a 'loading' animation message. This animation will appear by default when the table fails to fetch data within 500 milliseconds. You can increase this value to delay the loading animation to appear on the table. If you do not want to use this feature at all, then you can disable it by setting the value to 0.

 2. Column Resizable and Selectable

columnResizable     boolean   default:true 

columnSelectable   boolean    default:true 

These options enables end users to resize the table columns for a better view and also the user can decide which columns should remain in the view by filtering it out. To filter columns user must right click on the header row of the table and to resize the user can just drag the column header.

3. Toolbar Options

This option is used to control jTable toolbar and it's items. By default, only item in toolbar is 'Add new record' item (it's added by jTable if you define createAction). We can add custom items to this toolbar like "Export to Excel", etc.

toolbar: {
    items: [{
        icon: '/images/excel.png',
        text: 'Export to Excel',
        click: function () {
            //perform your custom job...
        }
    }]
},

4. Paging Options

jTable offers all required inputs for perfect paging of records in a table. To enable paging,

paging    boolean   default:false 

To fix the number of records displayed in a page,

$('#MyTableContainer').jtable('option', 'pageSize', 20);

Or to allow the user to select from more than one option for pagesize, you can declare an array of page size values to pageSizes option,

pageSizes  array of numbers   default:[ 10,25,50,100,250,500]

You can also choose to hide the pageSize select box by setting pageSizeChangeArea to false,

pageSizeChangeArea    boolean   default:true 

One more useful option is "Go to Page" that enables the user to directly select the page number of their choice. This feature can be controlled by gotoPageArea option that helps us to determine how to show this input,

gotoPageArea   string   default:combobox 

• combobox: Show a combobox (that contains all pages) to allow user to go to desired page.
• textbox: Show a text box to allow user to go to desired page.
• none: Does not shows 'go to page' input.

5. Localization

jTable by default provides localization scripts for 14 languages. You can easily localize jTables on your site by adding a localization script in the localization folder of the library, just after the jtable script file as shown below,

<script type="text/javascript" src="/Scripts/jtable/jquery.jtable.js">
<script type="text/javascript" src="/Scripts/jtable/localization/jquery.jtable.tr.js">

You can also create your own localization script and use it in the application as explained here. Screenshot below shows sample localization (turkish),

Other options such as sorting and row selection are also available. On the whole, jTable ships with a lot of cool features along with its main functionality to create AJAX based CRUD tables and its completely free. I really appreciate Halil İbrahim Kalkan's sincere efforts for coming up with such an awesome plugin thereby helping the developer community.

Articles on jTable in Java Web Applications

• jQuery jTable plugin in Java Web Applications - An Introduction
• Setup and Load Data in jTable using Servlets and JSP
• AJAX based CRUD Operations in Java Web Applications using jTable jQuery plugin
• Understanding User Interface Options
• jTable Pagination in Java Web Applications

These articles on jTable jQuery plugin have been included in the Official jTable Documentation. Thanks to Halil İbrahim Kalkan for that.

Please leave your comments and queries about this post in the comment sections in order for me to improve my writing skills and to showcase more useful posts.

Subscribe to GET LATEST ARTICLES!