Java : Integrating JTable Plugin Struts 2 & Hibernate 3 Using Ajax & JQuery

          

In  this web  project  I  will  explain  in  depth about how  to  perform  CRUD (create,read,update & delete) operation on single page using JTable,JQuery plugins integrating with Struts2 & Hibernate3 via Ajax. Our final outcome window with JTable with dynamic database values will  look like,

Jtable Window

here you can perform CRUD operation without redirecting to the new page.

First Things First :

Essential Jars and Libraries required for this project :

*(Please try to get the correct version of jars )

•  jTable Jars (themes,js)
• jQuery Jars (jauery files) 
• jQuery        (jauery user interface files)
• Struts2 Jars (commonly used struts2 libraries)
• hibernate3 Jars (commonly used hibernate3 libraries)
• struts2-json-plugin-2.3.8.jar  (most important in our project)

Now  lets  follow  it  step  by  step  to  create  a  web  project,  I  am  using eclipse(kepler) for creating this project, in other IDE's project structure and required files may be different.

Eclipse IDE : project->dynamic web project->(name it)->hit Enter.

Finally our project structure will look like,

Final Project Structure

Lets take a look at content of project one by one,

Struts.xml                                                                                                                            

The "struts.xml"  file contains  configuration  information  for  redirecting according to the actions generated by end-users, It  will  take  the request generated by users and redirect it to that respective action. Here name of package is "default"(it  can be anything), and extends "json-default" which creates dependency with struts2-json-plugin.2.x.x.jar file.

In action  tag, name implies  every action name will be followed by "Action" text, class attribute show that on every action methods will be called from JtableAction.class  file. Result attribute show we will be redirecting to the same page  "index.jsp" as outcome of every action. 

Web.xml                                                                                                         

In this web.xml is a J2EE configuration file, It has no role than how web container is going to process the elements of the HTTP request generated by end-users.  

Hibernate.cfg.xml                                                                                           

This file is going to have the Hibernate and database related configurations like database driver class, exactly on which port we are going to find our database, username and password for database access, Hibernate dialect for mysql database. Also it will contain direct mapping of the model file which we are going to use in our projects.(All model classes are exact copies from database in beans format). 

Note**:  To run this file you must have MySQL database "krishiseva" and table named Employee with all necessary fields that we are using in project, or you can change  it according to your requirement like,  if  you  are  using  Oracle database   you  must  need  to  change  database  Drivers,  Dialect  and  port accordingly. And if you are changing table related data, then you must change all related things. 

 Employee.hbm.xml                                                                                         

It is a model(POJO) class configuration file, which shows exact fields from database with their types and size. We have to be careful with matching names, types and sizes of the fields from actual database tables. If someone wants to user more than one database tables then, there must be exact number of pojo/model class as well as "hbm.xml" file.

EmployeeTableJtable.js                                                                                                    

This file is responsible for creating actual rendering of the Jtable on webpage, we have to link it from the index.jsp page where we want to  display our table. It is defining a Jtable container "EmployeeTableContainer"  which we have to load on respective jsp page. It also contains list of all Actions that user will be generating while using Jtable. It also shows the "fields" that will be visible on Jtable (**note : fields name must match with model class's variable names) , Field: title will be the name of table column that will get displayed on jsp page.

Employee.Java                                                                                                

This file is just Plain Old Java File, its name must be same to the table in the database which we want to use. Also it should contains all the fields from database tables as variables in POJO class.

HibernateConfig.java                                                                                       

This file will be used to get the connection Object to the database, Which have two static methods getSession and CloseSession.

DaoImple.java                                                                                                 

This file will be actually interacting with database/tables to fetch and store data in the database. It have  four important methods list(), updateEmployee() ,addEmployee() and deleteEmployee(). which will be used by hibernate to generate HQL queries over SQL wrapper. This all methods will be used by JTableAction class with respective actions generated by users.

JtableAction.java                                                                                            

This file is main action class, which will be responsible for linking its methods with actions defined in the EmployeeTableJTable.js .

Index.jsp                                                                                                         

This is the jsp page where all of our data will be displayed, also now all Jtable html tags will be generated automatically . We just have to show the Jtable Container in division tag in side the html body tag.

 Now finally run this project from eclipse environment with available server, and use Jtable to perform CRUD operation on database.

Adding an Record to the database:

 By Clicking the add record button on the page, a new Popup window will appear which will let us add a new record to database table.

Insert Employee Record

                                           

 By putting proper values inside text boxes, it will be possible for you to insert new record in the database table.

Deleting an Record from the database: 

 By clicking the respective delete button to the record, we can delete that record from Jtable view as well as database table.

Delete Employee

Updating an Record from the database:

By clicking the update button related with particular record, a update record will appear with previously present values. Make change in values, after submitting changes will reflect in Jtable as well as Dabase table.

Edit Record

 Good luck for using Jtable plugin.

for more information about JTable.org

 Download the Source code in War file,