In this help topic you will learn how to bind a jqxGrid to a MySQL database using the Spring Web MVC framework, which provides model-view-controller architecture and ready components that can be used to develop flexible and loosely coupled web applications. The MVC pattern results in separating the different aspects of the application (input logic, business logic, and UI logic), while providing a loose coupling between these elements.
Our goal is to populate a jqxGrid from a MySQL database. In the example presented here, we will be using the Northwind database. To learn how to set it up, please follow Step 1 from the help topic Configure MySQL, Eclipse and Tomcat for Use with jQWidgets.
In this tutorial, we will be using Eclipse IDE for Java EE Developers, version Luna.
Add the necessary project dependencies in the file
pom.xml in the root
of the project:
web.xml, found in
everything about the application that the server needs to know. Configure it as
The <servlet> element declares the DispatcherServlet. When the DispatcherServlet
is initialized, the framework will try to load the application context from a file
[servlet-name]-servlet.xml located in the
directory. The <servlet-mapping> element specifies what URLs will be handled
by the DispatcherServlet.
The DispatcherServlet has to be created. Do so by right-clicking the
folder and selecting New → Other. Choose XML
File and name the file
the following as its content:
We are going to populate a jqxGrid with information about employees from the employees table in the Northwind database. That is why we need a Model class which describes an employee and their properties.
Java Resources and create a new Source Folder.
Set jqwidgets-spring as its Project name and src/main/java
as its Folder name. Next, create a new package in the folder named
In the new package, create our Model class,
Employee. This class describes
an employee with their first name, last name, title and birth date with the following
The Controller is where the DispatcherServlet will delegate requests. It will retrieve
employee data from the database and store it in instances of the
class. Create a new class,
GridController in the package
with the following content:
resources folder in
src\main\webapp and in it
add two more folders -
css. Include in them all
(or only the necessary) jQWidgets files - the scripts (including
and the specific widget files) in
js and the stylesheets (
and any themes and associated images) in
css. Remember to include a
version of jQuery in
The View is where the jqxGrid with the employee data will be displayed. Create a
new JSP File in
src\main\webapp\WEB-INF and name it
grid.jsp. This page will serve as the View. Here is its content:
You will need to add the JSP Standard Tag Library to the project. Create a folder
src\main\webapp\WEB-INF and place the library's
JAR there. You can get it from this location: http://www.java2s.com/Code/Jar/j/Downloadjstl12jar.htm.
Before running the View, please make sure you have the Apache Tomcat server installed and configured as explained in Steps 5 and 6 from the tutorial Configure MySQL, Eclipse and Tomcat for Use with jQWidgets.
Right-click the project and select Run As → Run on Server. In the window that appears, select Tomcat v8.0 Server at localhost and click Finish.
Go to http://localhost:8080/jqwidgets-spring/grid to view the grid page:
You can download the project as a WAR file from here: jqwidgets-spring.zip.
You may also be interested in the following help topics: