- Back to Home »
- Converting JSF <h:dataTable/> to <annaRascla:RajniKant/> table ...
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.
- Go to http://www.datatables.net/
- Download version 1.7.6
- Modify your XHTML file as shown below
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
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