Search code examples
jsfprimefacesprimefaces-datatable

Reorder Primefaces DataTable onclick


I want to perform a row switch onclick, like in example below. The only way primefaces allow swapping rows is make them draggable, which is not an option to me. Poked it for about a day, no luck. I would appreciate any assistance, thanks! PF version 6.1.

function moveUp(id){
    let element = $("tr").find(`[data-ri='${id}']`);
    element.prev().before(element);
}
function moveDown(id){
        let element = $("tr").find(`[data-ri='${id}']`);
        element.next().after(element);
}
<p:dataTable id="prices-table" var="price" value="#{Bean.prices}">
    <p:ajax event="rowReorder" listener="#{Bean.onPriceReorder}"
            update="prices-table" />
    <p:column style="width:16px">
        <p:commandButton update="prices-table" onclick="moveUp()">up</p:commandButton>
        <p:commandButton update="prices-table" onclick="moveDown()">down</p:commandButton>
    </p:column>
    <p:column headerText="Title">
        <h:outputText value="#{price.title}" />
    </p:column>
</p:dataTable>

Solution

  • Thanks, i managed to do it without any JS at all, posting code for anyone who may stumble upon this issue. JSF:

    <p:dataTable id="prices-table" var="price" value="#{Bean.prices}">
      <p:column style="width:16px">
        <p:commandButton update="@form" actionListener="#{Bean.movePrice(price, 'up')}">up</p:commandButton>
        <p:commandButton update="@form" actionListener="#{Bean.movePrice(price, 'down')}">down</p:commandButton>
      </p:column>
      <p:column headerText="Title">
        <h:outputText value="#{price.title}" />
      </p:column>
      <p:column headerText="Amount">
        <h:outputText value="#{price.amount}">
          <f:convertNumber minFractionDigits="2" type="currency" currencySymbol="$" />
        </h:outputText>
      </p:column>
    

    Bean:

    public void movePrice(Price price, String direction) {
        int orderPosition = price.getOrderPosition();
        boolean isPricesSwapped = false;
        if (direction.equals("up") && orderPosition != 0) {
            Collections.swap(prices, orderPosition - 1, orderPosition);
            isPricesSwapped = true;
        }
        if (direction.equals("down") && orderPosition != prices.size()) {
            Collections.swap(prices, orderPosition, orderPosition + 1);
            isPricesSwapped = true;
        }
        if (isPricesSwapped) {
            for (int i = 0; i < prices.size(); i++) {
                price = prices.get(i);
                price.setOrderPosition(i);
            }
        }
    }