Drag and drop rows to reorder your DataTable in Primefaces

primefaces

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.

  1. 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>
  2. 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}"/>
    
  3. 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;
     }
    
  4. That’s all! Now you can reorder your Datatable using drag&drop feature and save the new order by clicking a button.

3 thoughts on “Drag and drop rows to reorder your DataTable in Primefaces”

  1. 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)

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top