Search code examples
javascriptjsfrichdatatable

Javascript read data from rich:dataTable?

I can generate datatable during form initialization.(JSF). Then I want to write javascript for read data from rich:dataTable values

<f:view>
  <html>
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

      <script type="text/javascript">
            function getTableValue()
            {
                //Here i want to write code for get one by one value  
                //from rich:datatable content
            }
      </script>

    </head>
    <body>
      <h:form id="tableForm" binding="#{DataTable.initForm}">

        <rich:dataTable id="salesTable" value="#{DataTable.saleList}" var="data">
          <f:facet name="header">
            <rich:columnGroup>
              <rich:column>
                <h:outputText value="Sales" />
              </rich:column>
            </rich:columnGroup>
          </f:facet>
          <rich:column>
            <h:outputText value="#{data.salesPercentage}" />
          </rich:column>
        </rich:dataTable>

        <input id="tableButton" type="button" value="getDataTableValue" onclick="getTableValue()" />

      </h:form>
    </body>
  </html>
</f:view>

Help me. Thanks for your effort.

Solution

  • First get the table from the document (rightclick page, do View Source to see generated id yourself).

    var table = document.getElementById('tableForm:salesTable');

    Then get the rows as array from the table body.

    var rows = table.getElementsByTagName("tbody")[0].getElementsByTagName("tr");

    Then loop over rows and get the cells as array from the row.

    for (var i = 0; i < rows.length; i++) {
    var cells = rows[i].getElementsByTagName("td");
}

    Then loop over the cells and get the content.

    for (var j = 0; j < cells.length; j++) {
    var cell = .cells[j];
    alert(cell.innerHTML);
}

    See also: