In this tutorial you will learn how to bind a jqxGrid to a MySQL database using JSF (JavaServer Faces), a technology which simplifies building user interfaces for JavaServer applications.
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 and plugins in the file
in the root of the project:
web.xml, found in
everything about the application that the server needs to know. Configure it as
The Managed Bean (which acts as a Controller) will retrieve employee data from the
database, format it as a JSON string and return it to the View (Step 5).
Create a new class,
EmployeeController 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 XHTML Page in
src\main\webapp\WEB-INF and name
grid.xhtml. This page will serve as the View. Here is its content:
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-faces/grid.xhtml to view the grid page: