In Primefaces you can drag&drop your columns using widget Datatable to change order of them, but there is no out-of-the-box action to reorder rows. Code snippets attached below will help you implement such custom functionality.
- We need to add some JavaScript (JQuery) in your JSF page to make Datatable sortable and to disable selection mode. Listed below doReorder() method gets the new order of the rows and save to order_q variable:
<script type="text/javascript"> $(document).ready(function() { $('.ui-datatable tbody').sortable(); $('.ui-datatable tbody').disableSelection(); }); function doReorder() { var order = ''; var len = $('.row').length; $('.row').each(function(index) { order += ($(this).text() + ((index == (len - 1)) ? '' : ';')); }); $('#order_q').val(order); return true; } </script>
- Add some code to your Datatable. You see a new column with number of the row as value with attribute styleClass set to “row” . There is a hidden variable order_q updated during execution JavaScript method doReorder() :
<p:dataTable rowIndexVar="rowIndex" var="entry" value="#{myBean.list}" > <p:column headerText="#"> <h:outputText styleClass="row" value="#{rowIndex}"/> </p:column> ... (other colums as you wish) </p:dataTable> <h:inputHidden id="order_q" value="#{myBean.order}"/> <p:commandButton value="Submit order" ajax="false" onclick="return doReorder()" action="#{myBean.reorder}"/>
- Your bean class should contain a String field order (with getters and setters of course). The variable wil store a value from the JavaScript – the new order of our list (source data of the Datatable widget). We need to implement also a method mentioned in the xhtml – reorder() to handle action from button “Submit order”
public String reorder() { Map<String, String> tmp = FacesContext.getCurrentInstance().getExternalContext().getRequestParameterMap(); String order = tmp.get("order_q"); if (order != null && !order.isEmpty()) { ArrayList<YourData> reordered = new ArrayList<>(); for (String s : order.split(";")) { try { Integer i = Integer.parseInt(s); YourData data = list.get(i); reordered.add(data); } catch (NumberFormatException nfe) { } } list = reordered; } return null; }
- That’s all! Now you can reorder your Datatable using drag&drop feature and save the new order by clicking a button.
Your style is very unique in comparison to other folks I’ve read stuff from.
I appreciate you for posting when you’ve got the opportunity, Guess I will just book mark this site.
Also visit my web site: dui lawyer (Willie)
I was suggested this web site by my cousin. I’m not sure whether
this post is written by him as no one else know such detailed about my problem.
You are wonderful! Thanks!
Hi! Quick question that’s totzlly off topic. Do you know how to make your
site mobile friendly? My site looks weird when browsing from
my iphone 4. I’m trying too find a temlate or plugin that might
be able to correct this issue. If you have
any suggestions, please share. With thanks!
My homepage; where to get schwinn easy steer tricycle