{"id":1204,"date":"2011-02-02T19:56:44","date_gmt":"2011-02-02T19:56:44","guid":{"rendered":"http:\/\/salientsoft.co.uk\/?p=1204"},"modified":"2011-02-03T16:41:10","modified_gmt":"2011-02-03T16:41:10","slug":"primefaces-table-sortingcommon-gotchas","status":"publish","type":"post","link":"https:\/\/salientsoft.co.uk\/?p=1204","title":{"rendered":"Primefaces Table Sorting&ndash;Common Gotchas"},"content":{"rendered":"<p><strong><u>Update 2\/2\/2011<\/u><\/strong><\/p>\n<p><strong><u><\/u><\/strong><\/p>\n<p>According to<strong> <\/strong><a href=\"http:\/\/primefaces.prime.com.tr\/forum\/viewtopic.php?f=3&amp;t=5135&amp;p=22147&amp;hilit=client+table+sort#p22063\"><strong>this post here<\/strong><\/a> by Cagatay Civici, the Primefaces Project Leader, as at Primefaces 2.2M1, client side datatable is not supported and the <em>dynamic<\/em> attribute is deprecated from then on.    <br \/>Seemingly it was becoming too hard to support all the table features on both client and server sides.    <br \/>It is a shame that this was not documented better and more widely \u2013 the user manual still documents the <em>dynamic<\/em> attribute, and there are a number of posts about client side sorting (though in fairness they probably predate 2.2M1).<\/p>\n<p>This behaviour exactly ties up with what I am seeing in my testing \u2013 the dynamic attribute does nothing, <em>sortFunction<\/em> is ignored, and all sorting is done via Ajax server side.<\/p>\n<p><strong><u>Original Post 2\/2\/2011<\/u><\/strong><\/p>\n<p>Having successfully got sorting working I was frustrated to find that a new simple example failed to work. Primefaces table sorting is pretty much transparent, requiring minimal effort and working out of the box. The lessons learned on this one are instructive so I summarise them below.<\/p>\n<p><strong><span style=\"text-decoration: underline\">Details of Example and Problem<\/span><\/strong><\/p>\n<ol>\n<li>The example fetched a list using JPA, stored the list in a view backing bean, then displayed it in a table with a sortable header. <\/li>\n<li>When the header was clicked, the up\/down arrows were correctly displayed, but the data was not sorted \u2013 it was as if the request was ignored. <\/li>\n<li>It was not immediately obvious how the header click was handled \u2013 there was no obvious click event on the HTML element, and I could not see any Javascript running after a quick test with Firefox\/Firebug. I gave up this line of attack but may look into it later as to how it all works. Some dynamic CSS pseudo classes\/jQuery trickery may be involved. <\/li>\n<li>I was not certain as to whether the table was client side or server side\/Ajax, even though it should have been client side by default. To diagnose the problem, I changed the value of the <em>sortBy<\/em> attribute in the column header to be an invalid bean property. The symptoms did not change, but an errors were logged in the Glassfish server log for each header click \u2013 <em>\u201c[#|2011-02-02T18:22:14.557+0000|SEVERE|glassfish3.0.1|org.primefaces.model.BeanPropertyComparator|_ThreadID=24;_ThreadName=Thread-1;|Error in sorting|#]\u201d.<\/em> <\/li>\n<li>This showed that the sort was being attempted but was failing due to the invalid property, which indicates that the sort was attempted server side. <a href=\"http:\/\/primefaces.prime.com.tr\/forum\/viewtopic.php?f=3&amp;t=1826&amp;start=0#p9184\"><strong>According to the Primefaces forum<\/strong><\/a>, for client side sorting, the sortBy property is not used as the displayed data is sorted. <\/li>\n<li>Interestingly, I would have expected Primefaces to use a client side table by default, but clearly it was not. Changing the d<em>ynamic<\/em> property on the table tag to false explicitly had no effect and the behaviour was unchanged, so I will need to investigate client side tables further as for small data sets they are faster \u2013 I will update this post when I have done this. <\/li>\n<li>I turned on FINEST logging with Eclipselink in <em>persistence.xml. U<\/em>se <em>&lt;property name=&quot;eclipselink.logging.level&quot; value=&quot;FINEST&quot; \/&gt;<\/em> to do this, and note that you need to bounce Glassfish to for a logging level change to be picked up. I noticed after this that the JPA query seemed to be rerunning very often, perhaps for every click of the sort header. This lead me to wonder if the backing bean was being recreated each time. <\/li>\n<\/ol>\n<p><strong>&#160;<\/strong><\/p>\n<p><strong><span style=\"text-decoration: underline\">Cause and Solution<\/span><\/strong><\/p>\n<p>In the end, it was simply that I had not annotated the JSF backing bean as <em>@SessionScoped<\/em> (the example used CDI throughout, and did not use JSF managed beans). This meant the bean was request scoped by default, and was indeed being recreated \u2013 the sort was trying to do the correct thing, but the data was getting reloaded from the database in the original sort order each time!<\/p>\n<p>Adding the correct annotation as above (and making a couple of the beans correctly implement serialisable to satisfy CDI\/Weld) solved the problem.<\/p>\n<p>This is a good example of where a problem cause is not immediately apparent from the symptoms.<\/p>\n<p><strong><span style=\"text-decoration: underline\">Sample JSF page fragment showing the form containing the table<\/span><\/strong><\/p>\n<p>&lt;h:form id=&quot;frmTest&quot;&gt;&#160;&#160;&#160; <br \/>&#160;&#160;&#160; &lt;util:themeSwitcher form=&quot;frmTest&quot; outerStyle=&quot;clear: both; float: left; margin-bottom:20px;&quot; innerStyleClass=&quot;ui-widget&quot;\/&gt;    <br \/>&#160;&#160;&#160; &lt;h:panelGroup layout=&quot;block&quot; style=&quot;width:300px;&quot;&gt;&#160;&#160;&#160; <br \/>&#160;&#160;&#160;&#160;&#160;&#160;&#160; &lt;p:dataTable var=&quot;taxonomyNodes&quot; value=&quot;#{taxonomyBrowser.taxonomyNodes}&quot; scrollable=&quot;true&quot;    <br \/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; styleClass=&quot;clear #{fn:length(taxonomyBrowser.taxonomyNodes) lt 20 ? &#8216;ss-tableheader-scrolladjust-nobars&#8217; : &#8216;ss-tableheader-scrolladjust-bars&#8217;}&quot;    <br \/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; height=&quot;460&quot; &gt;&#160; <br \/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; &lt;f:facet name=&quot;header&quot;&gt;    <br \/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; Client Side Sorting    <br \/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; &lt;\/f:facet&gt;    <br \/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; &lt;p:column headerText=&quot;Category List&quot;&#160; sortBy=&quot;#{taxonomyNodes.text}&quot;&gt;    <br \/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; &lt;h:outputText value=&quot;#{taxonomyNodes.text}&quot; \/&gt;    <br \/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; &lt;\/p:column&gt;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; <br \/>&#160;&#160;&#160;&#160;&#160;&#160;&#160; &lt;\/p:dataTable&gt;    <br \/>&#160;&#160;&#160; &lt;\/h:panelGroup&gt;    <br \/>&lt;\/h:form&gt;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Update 2\/2\/2011 According to this post here by Cagatay Civici, the Primefaces Project Leader, as at Primefaces 2.2M1, client side datatable is not supported and the dynamic attribute is deprecated from then on. Seemingly it was becoming too hard to support all the table features on both client and server sides. It is a shame [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[22],"tags":[13,110,35,10,40,182,112,16,111],"_links":{"self":[{"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=\/wp\/v2\/posts\/1204"}],"collection":[{"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1204"}],"version-history":[{"count":8,"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=\/wp\/v2\/posts\/1204\/revisions"}],"predecessor-version":[{"id":1212,"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=\/wp\/v2\/posts\/1204\/revisions\/1212"}],"wp:attachment":[{"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1204"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1204"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1204"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}