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>

@alpha.. did u managed to work live-scroll and lazyload together? if yes please let me know how did you do this, its a show topper for me. — arvin_codeHunk, Apr 25 '14 at 07:57
@arvin_codeHunk: I have implemented but it is not improving the performance of my app,the reason why i chosen to have both the features.As of now i have stopped working on this,i will take up this application coding after some days. — xdev, Apr 25 '14 at 08:04
ok...please check this post, http://stackoverflow.com/questions/23195131/primefaces-strange-behavior-with-livescroll-lazyload — arvin_codeHunk, Apr 25 '14 at 09:02

score 24 · Accepted Answer · edited Sep 14 '17 at 08:29

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.

Thanks Daniel for the reply.I followed your suggestion but it is displaying only zero on selection of any rows :(.I have developed small project using your suggestion please review in this link http://pastebin.com/embed_js.php?i=hJcsvwi4 — xdev, Jan 06 '14 at 14:59
I updated my answer. Note that in my case I set the attribute **rowIndexVar**. Try adding that to your code. — Daniel Teleginski Camargo, Jan 06 '14 at 15:13
Another thing, i have a requirement where this functionality must also be included on selection of the check box.It is working fine but with multiple checkbox selection it is throwing javascript error "Syntax error, unrecognized expression: tr[data-rk=4022,4021]".Please suggest me how to fix it.I dont know anything about jquery. — xdev, Jan 07 '14 at 02:46
In fact i need this operation to happen both on row select and check box selection. — xdev, Jan 07 '14 at 11:06
Thanks Daniel.This jquery code searches the entire DOM tree for the checked checkboxes and then writes the indexes.So using this if we check 3rd checkbox and again check 2nd it would be only showing index as 3.Please suggest me what should be done to make it work according to the requirement. — xdev, Jan 10 '14 at 02:41

score 4 · Answer 2 · edited Feb 22 '18 at 13:11

4

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

}

edited Feb 22 '18 at 13:11

Jasper de Vries

19,370
6
64
102

answered Sep 14 '17 at 08:41

Kukeltje

12,223
4
24
47

The complex answer also works with a lazy data model, but your solution can be adapted to work with a lazy data model page as well. – Jasper de Vries Feb 22 '18 at 13:11
@JasperdeVries: please do ;-) – Kukeltje Feb 22 '18 at 14:23
Basically replace the `cars` list with the current page list returned by the `load` method. – Jasper de Vries Feb 22 '18 at 16:31

To get the row number of the selected primefaces datatable row

2 Answers2

Linked