Posted by : Munish Gogna Saturday, May 14, 2011

By RajniKant table I mean a readonly table that has all the features (sorting, pagination, searching etc). Most developers who are struck with JSF RI implementation know already how difficult it is to provide all these mentioned features. Suddenly you think of moving to PrimeFaces, RichFaces, BlaBlaFaces etc. but hey stop a while I have something special for you in today's post.

In the next section I will try to convert one simple <h:datatable> to <annaRascla:RajniKant> table as per the description of Rajnikant table.

Let's assume we have an existing JSF data table as shown below and suddenly there is a requirement to provide pagination and sorting capabilities.


The table looks exactly same as shown below:

Nothing fancy :(, lets move to make it live.

We will use DataTables plug-in for the jQuery Javascript library to make it happen.

Points to note
  • The tags htmlhead and htmlbody shown above correspond to usual HEAD and BODY tags of html language (Blogger doesn't allow these tags)
  • The reason for not using table id (form:mytable) in ready(function) is that Datatables plugin doesn't accept id of the table having colon in the name itself :( and we all know that JSF generates Ids like this, so how I provide the id of my table? Simple provide the unique class name of that element :)
  • Use this approach if the table is not very large, for large tables you can use ajax capabilities of the plugin, check Project's home page for more details.
  • All the resources above (css and js) come from the artifacts we downloaded earlier
Having made these changes, let's see how our simple table looks now:

The only word that come to my mind is WOW, as can be seen it has:

> Sorting feature
> Pagination feature
> Search feature
> Simple and clean design

Thanks everyone.

2 Responses so far.

Leave a Reply

Subscribe to Posts | Subscribe to Comments

Popular Post


enums (1) java (2) JAX-RS (1) JPA (1) mysql (1) request 2 (1) RESTful (1) sphinx (1) tomcat (1) web service (2) ws (2)