Your own Self-realization is the greatest service you can render the world.
  • »
  • Converting JSF <h:dataTable/> to <annaRascla:RajniKant/> table ...

Converting JSF <h:dataTable/> to <annaRascla:RajniKant/> table ...

Posted by : Unknown 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 comments... read them below or Comment }

  1. cagatay_civiciMay 15, 2011 at 1:02 AM

    Using a javascript widget will actually look impressive at first but when things get complex then you have a problem. For example does your datatable support AJAX pagins, sorting and searching which is a must to have in real apps. Progressively enhanced huge markup will also have a performance effect if table has many rows.

    ReplyDelete
  2. UnknownJanuary 12, 2012 at 7:52 AM

    yes I completely agree with you, but for small tables the approach looks ok. Moreover these days we have seen a huge improvement in UI components available in primefaces and richfaces, so dependending on jquery to provide all such features in JSF application should be a thing of past.

    ReplyDelete

Popular Post

Labels

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)