To get the row number of the selected primefaces datatable row

Question

I have a primefaces datatable i need to display (selected row number) of (total number of rows) in the JSF page.I could get the row numbers displayed in one of the columns

Answer 1

I believe that there's not a straight forward way to do so. Although using two ajax requests is not pretty, you can at least achieve the result you expect when using plain PrimeFaces. You can reduce this to one call if you replace the p:ajax with the PrimeFaces extensions pe:javascript which does not do a roundtrip to the server

Every row (tr) rendered by your datatable has a attribute called data-rk with your rowKey and another attribute called data-ri with your rowIndexVar value.

You can get the data-rk attribute through dtWidgetVar.selection (dtWidgetVar is the name of the widgetVar in your datatable).

You can now send the indexRow to your model using a remoteCommand

Here is the code I used to test it:

The View

<p:remoteCommand name="displayIndex" process="@this" update="index" actionListener="#{viewMBean.displayRowIndex}"/>

<p:dataTable id="dt" var="data"
             value="#{viewMBean.dataModel}" 
             selection="#{viewMBean.selectedRow}"
             selectionMode="single"
             widgetVar="dtVar"
             rowIndexVar="index">
    <p:ajax event="rowSelect" 
            oncomplete="displayIndex([{name:'index', value:jQuery('tr[data-rk=' + dtVar.selection + ']').attr('data-ri')}])" process="@this" />
    <p:column headerText="#">
        #{index + 1}
    </p:column>
    <p:column headerText="Dados">
        #{data.name}
    </p:column>
</p:dataTable>
<br />
Row Index: <p:inputText id="index" value="#{viewMBean.index}" />

Managed Bean

public void displayRowIndex() {
    FacesContext context = FacesContext.getCurrentInstance();
    Map map = context.getExternalContext().getRequestParameterMap();
    String pIndex = (String) map.get("index");
    index = Integer.parseInt(pIndex);
}

In case you are using checkbox selection, you can retrieve the selected indexes like this:

function beforeDisplayingIndexes(){
    var indexes = "";
    jQuery("tbody .ui-chkbox-box").each(function(){
      if (jQuery(this).hasClass("ui-state-active")){
        indexes = indexes + (indexes === "" ? "" : ",") + jQuery(this).closest("tr").attr("data-ri");
      }
    });
    //for debuging only
    console.log(indexes);
    displayIndex([{name:'index', value:indexes}])
}

You should now be able to make the proper modification to your code to make use of that.

Answer 2

I'm surprised by the complex solution in the other answer. Assuming you you have the #{workSpaceBean.lpInfoList} serverside when doing the 'select', you can easily do (code according to the PrimeFaces showcase, adapt according to your needs)

<p:ajax event="rowSelect" listener="#{dtSelectionView.onRowSelect}" update="..." />

public void onRowSelect(SelectEvent event) {
    int rownum = cars.indexOf((Car)event.getObject());

}