primefaces single selection datatable pagination + rowIndexVar

Question

I have a datatable with columns containing images.

<p:dataTable id="tabexam"
             lazy="true"
             paginatorPosition="bottom"
             var="exam"
             value="#{dyna.lazyModel}"
             widgetVar="examTable"
             emptyMessage="No results"
             paginator="true"
             rows="#{dyna.rows}" 
             selection="#{dyna.selectedExamen}"
             rowKey="#{exam.studyUid}"
             selectionMode="single"
             rowIndexVar="rowx"
             resizableColumns="false"  
             draggableColumns="true"
             paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink}"  >

On simple text columns when you select a row it gets selected and highlighted correctly.

The problem is with columns that contain p:graphicimage:

<p:column headerText="#{column.userListname}"
          sortBy="#{column.dbname}"
          filterBy="#{column.dbname}"
          filterMatchMode="exact" 
          style="#{column.visible==true? 'text-align:center!important;vertical-align: middle!important;':'display:none!important;'}"
          width="#{column.visible==true? 16:0}"
          resizable="#{column.visible==true? column.resizable:false}" 
          rendered="#{column.dbname == 'studyPatientState'}">

           <p:graphicImage value="/images/study_State_icons/#{exam.studyPatientState}.png" styleClass="imagero"
                          onclick="examTable.unselectAllRows();
                                        examTable.selectRow(#{rowx});"/>
</p:column>

As you see in order to highlight rows on graphicImage click, i had to add this js:

onclick="examTable.unselectAllRows();examTable.selectRow(#{rowx});"

The problem is when i switch to another page those js functions cease to work.

I have noticed that in order this to work i need to reset the rowIndexVar for every page, but how may implement such thing.

what am doing wrong here ?

Answer 1

There is one more alternative here using JQuery, try this.

onclick="clickParent(this)"

<script type="text/javascript">

   function clickParent(imgElement){
     var tdElement = $(imgElement).parents("td");
     $(tdElement).click()
   }
</script>

The above approach will send the Image element to the fuinction, the function will seach through the Parents until it reaches the TD element and Invokes the click event on the td .