Find a particular cell from a PrimeFaces datatable in JQuery

Question

I am kind of new to Primeface and JQuery. I have a datatable and I would like to access a particular cell of that datatable in jquery. Below is what I am trying to do--

My Datatable code:

<p:dataTable id="employeeDataTable" var="employee" value="#{userPreferenceBean.employeeDataModel}"
            paginator="true" rows="10" selection="#{userPreferenceBean.selectedEmployeeList}" rowIndexVar="rowIndex">

            <f:facet name="header">
                List of Employees
            </f:facet>

            <p:column selectionMode="multiple" style="width:2%" />

            <p:column headerText="Primary Employee" style="width:2%">
                <p:commandButton value="Me" update=":#{p:component('primaryEmployeeDetails')}" id="ajax"
                    actionListener="#{userPreferenceBean.saveEmployee}" styleClass="ui-priority-primary">
                    <f:param name="employeeName" value="#{employee.name}" />
                </p:commandButton>
            </p:column>

            <p:column headerText="Name" style="width:48%">
                    #{employee.name}
            </p:column>

            <p:column headerText="Department" style="width:48%">
                    #{employee.department}
            </p:column>

            <f:facet name="footer">
                <p:commandButton id="submit" value="Save Preferences" icon="ui-icon-disk"
                    update=":#{p:component('selectedEmployeeDetails')}" />
            </f:facet>
        </p:dataTable>

Now I would like to access the commandbutton from a particular cell (say for example nth row and 2nd column) from JQuery. This is what I am doing now -

$(document).ready(function() {
        $(".ui-priority-primary").click(function() {
            alert('test')
            var row = 'employeeDataTable:' + rowIndex + ':ajax';
            $(row).each(function() {
                alert('test again')
            });
        });
});

Now the alert with 'test' is working, but alert with 'test again' is not working. It means I am able to get the click event from the command button. But looks to me I am not able to get the particular cell from a datatable. Can you please help me to understand what mistake I am doing here? Thanks.

Regards, Sudipta Deb

Answer 1

Lets say you would like to get the cell in the row with rowIndex and in the column with columnIndex . So what you would do to get that cell via jQuery is the following:

$(document.getElementById("myForm:employeeDataTable"))
    .find("tbody:first").children("tr:nth-of-type(" + rowIndex + ") td:nth-of-type(" + columnIndex + ")")

As you need the absolute ID it would be better to give the parent a proper name or you can use document.getElementById("#{p:component('employeeDataTable')}") instead, so primefaces does the ID-lookup for you.
I used document.getElementById instead of the jQuery ID-selector # , because then you would have to escape every : .

---

So for your given function use the following:

 var row = $(document.getElementById("myForm:employeeDataTable")).find("tbody:first").children("tr:nth-of-type(" + rowIndex + ")"); row.each(function() { alert('test again') }); 

to alert test again for each row of the dataTable .