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 using rowIndexVar attribute but i am not getting any idea to display the same numbers separately in the input text on row select.

What should i need to do in JSF page or managed bean to get selected row number.

Please help me in this regard.

Below is my JSF page

<p:dataTable id="workSpaceList" var="data"
            value="#{workSpaceBean.lpInfoList}" widgetVar="multiSelection"
            selection="#{workSpaceBean.selectedRows}" resizableColumns="true"
            liveScroll="true" scrollRows="55" scrollWidth="85%"
            scrollHeight="81%" styleClass="datatable" 
            scrollable="true" rowIndexVar="rowIndex"
            filteredValue="#{workSpaceBean.filteredWorkSpaceItems}">

            <p:column selectionMode="multiple" style="width:3%" />
            <p:column headerText="#" style="width:3%">
                #{rowIndex+1}
            </p:column>
            <p:column headerText="Insured" filterBy="#{data.insuredName}"
                sortBy="#{data.insuredName}" style="width:24%">
                <h:outputText value="#{data.insuredName}" />
                <!--   style="width:250px" -->
            </p:column>

            <p:column headerText="City" filterBy="#{data.custAddress_City}"
                sortBy="#{data.custAddress_City}" style="width:12%">
                <h:outputText value="#{data.custAddress_City}" />
            </p:column>
            .
            .
            .
            .

        </p:dataTable>

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.