Skip navigation

Monthly Archives: August 2012

Create Ajax Paging with Java (Hibernate + Spring MVC) and JQuery

So you want your page to have an ajax paging for your comments page or tabular data. Ajax paging means that every time you select a page (from page navigator) it will not reload or refresh the whole web page, instead it is only change the comments or tabular data area.

This article is only one from many techniques to accomplish this, we are going to make ajax paging using Java (Hibernate + Spring MVC) and JQuery.

The way for getting data for the selected page is actually simple, for example if selected page is 2 and page size is 10 you can make SQL query like:
MYSQL


select * from app_user limit 10,10;

Notes: In Mysql,  zero (0) is first index. The query will get records 11-20 from table “app_user”

ORACLE


select * from (SELECT rbt_config.*, ROWNUM r FROM rbt_config) where r between 11 and 20;

Fortunately we are going to use Hibernate and dont have to create specific query for each databases.
Just use code like below and Hibernate will take care how he will make queries for the database we choose.

HIBERNATE

protected List listByPage(Class clazz, int firstResult, int maxResult) {
        String strQry = "from " + clazz.getName() + " c order by c.id desc";

        Query query = this.sessionFactory.getCurrentSession().createQuery(strQry);
        query.setFirstResult(10);
        query.setMaxResults(10);

        return query.list();
    }

After you get the data you simply display it on the page, that’s it. But the tricky part from paging is how do you want the page navigator to look like, there are page navigator with first and last page link/button, there are page navigator with previous and next page link/button, also page navigator with sequences of numbers link to select a page, etc.
It’s up to you how the page navigator will look like, for these example just see it by your self 🙂 .

I don’t put much code here, so just download the code and see it. Here is some of the screenshots:

Home

Comments Page 1

Comments Page 2

Tabular Data 1

Tabular Data 2

There are two examples I provide:  Comments page look a like and tabular data sample.
Every time we select a page from page navigator it will make ajax request to server (using JQuery) and replace/change the comments or tabular data area with new result without reload whole area. Also during make ajax request to server it will display loading ajax image.

Loading Ajax Image

You can download the code from here or here. It’s Java project using Maven, i’m usually open it using IntelliJ IDEA. To set up the data just run “com.ajax.paging.dao.SetUpData” from “src/test” folder, using IntelliJ IDEA  I just right click the file –> RUN, It will save arround 20 records to table “COMMENT” and “USER” for testing ajax paging.

Dont forget to edit “src/resources/hibernate.properties” to match your environtment.
In the “src/resources/app.properties” there two important keys:
– app.page.size.default –> change the page size
If “app.page.size.default=6” it will display 6 records every page, and so on.

– app.page.nav.trail –> change the page navigator trail
If “app.page.nav.trail=2” and selected page is 3 page navigator will look like 1 2 [3] 4 5 (two previous page and two next page) and so on.

Please build, package, and run in your favourite web server / servlet container. Download from here and here.