Reorder Primefaces DataTable onclick

703 Views Asked by At

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

There are 1 best solutions below

0
On BEST ANSWER

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);
        }
    }
}