jQuery jTable plugin in Java Web Applications - An Introduction

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.

jTable is a jQuery plugin that is used to create AJAX based CRUD tables without coding HTML or Javascript. In one of my articles I discussed about using DataTable, a jQuery datagrid plugin in Java web applications. One other jQuery datagrid plugin that is comparatively new but with lot of features and rich look is jTable. This article is an introductory article for the series of articles coming up on how to implement AJAX based crud operations and other cool features jTable plugin offers in Java Web Applications (using Servlets and JSP's - Simple MVC Model 2 Approach)

In one of my articles I explained how to fetch data from database using jQuery AJAX. It involves a lot of jQuery code to make AJAX calls and to manipulate DOM for updating table with the response. Same way for other create, update and delete operations, we have to write lot of jQuery code for DOM manipulation. Also, when we have to require data manipulation in several pages, we must repeat the same code in all the pages. This is the reason why we should go for a built in datagrid plugin that will handle all the DOM manipulation functionalities for us and leave us with the job of handling server side code alone. 

Unlike other jQuery datagrid plugins that takes in html table and converts to rich datagrid, jTable takes a div id and automatically generates the html table inside the div. Below list consists of several features jTable possess as presented in the official home page,

• Automatically creates HTML table and loads records from server using AJAX.
• Creates 'create new record' jQueryUI dialog form. When user creates a record, it sends data to server using AJAX and adds the same record to the table in the page.
• Creates 'edit record' jQueryUI dialog form. When user edits a record, it updates server using AJAX and updates all cells on the table in the page.
• Allow user to 'delete a record' by jQueryUI dialog based confirmation. When user deletes a record, it deletes the record from server using AJAX and deletes the record from the table in the page.
• Shows animations for create/delete/edit operations on the table.
• Supports server side paging using AJAX.
• Supports server side sorting using AJAX.
• Supports master/child tables.
• Allows user to select rows.
• Allows user to resize columns.
• Allows user to show/hide columns.
• Exposes some events to enable validation with forms.
• It can be localized easily.
• All styling of table and forms are defined in a CSS file, so you can easily change style of everything to use plugin in your pages. CSS file is well defined and commented.
• It comes with pre-defined color themes.
• It is not depended on any server side technology.
• It is platform independed and works on all common browsers.

Let us see how to setup jTable jQuery plugin in a Java web project and list data from database in the next part of this tutorial series. 

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. Thanks for reading!!

Subscribe to GET LATEST ARTICLES!