Skip navigation

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.

6 Comments

  1. Hey my name is Kirill
    and I am java beginer

    I Look at many examples of Ajax Spring Jquery Hibernate
    and others
    but I cant bild it or join lib or something else

    what do you think about making a short Video
    with such programm as Camtasia Studio 7

    5 minutes and noproblems =)

  2. navigator not working. I enter 200 records in database. but navigator not showing more than two pages. only showing 1 and 2 .

    • Try to change value of “app.page.nav.trail=10” or whatever you want in file app.properties.

  3. nice and helpful post..
    can u please mail me this project

  4. very nice

  5. code links are not working – they go to series of ads


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: