Edit with Javascript a cell of a Primefaces DataTable

Question

I have a non-editable DataTable built with PrimeFaces. The table is initially filled with values obtained through a Bean's getter:

<p:dataTable var="lndClient" value="#{clientBean.model}" rowKey="#{lndClient.stringId}">

After the table is loaded, I need to update some cells through Javascript. The reason for that is that I am using cometD , a Ajax Push Technology pattern that uses Javascript-JQuery on the client side.

I know that I can update a cell by using something like

$('td#id').html("value"); 

but my problem is that I have no clue of what is the id of my cell(s). Looking at the html generated, I see that the rows are:

<tr data-ri="1" class="ui-widget-content ui-datatable-odd"><td><div class="ui-dt-c"><a id="centerTabView:accordion:j_idt18:j_idt19:1:j_idt22" ...>
...
<tr data-ri="2" class="ui-widget-content ui-datatable-even"><td><div class="ui-dt-c"><a id="centerTabView:accordion:j_idt18:j_idt19:2:j_idt22" ...>

Indeed, the row identifier is there, although inside a td tag. And the other columns are:

<td><div class="ui-dt-c">...</div></td>

So, my question is: how can I identify a cell in a PrimeFaces DataTable?

Answer 1

If it's possible for you to refer to cells by column index and row id, you can use rowStyleClass attribute of p:dataTable .

For instance if you set it as rowStyleClass="#{lndClient.stringId}" , you will be able to refer to 3rd column of row with stringId xyz by something like $('tr.xyz td:first-child+td+td') - I am sure you can come up with a better selector.