Home How to get the data of a Primefaces dataTable to use in a Javascript function by using the DataTable ID?

Questions

How to get the data of a Primefaces dataTable to use in a Javascript function by using the DataTable ID?

March 3, 2022

I have the following Primefaces datatable(part of it is shown below)which gets its values from a database.

 <p:dataTable id="datalist" value="#{debtPaymentsController.lazyDebtPayments}" var="item"
                         selectionMode="single" selection="#{debtPaymentsController.selected}"
                         lazy="true" widgetVar="debtPaymentsTable"
                         paginator="true" scrollable="true" scrollWidth="100%"
                         paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}" 
                         rowKey="#{index}" rowIndexVar="index"
                         rows="10"
                         rowsPerPageTemplate="10,20,30,40,50">
 </p:datatable>

I am trying to use a Javascript script to export the content of the datatable to excel, because the Primefaces tool to export to excel called DataExporter does not work well with urls:

 <script type="text/javascript">
                        function exportTableToExcel(tableID) {
                            console.log(tableID);
                            var downloadLink;
                            var dataType = 'application/vnd.ms-excel';
                            var tableSelect = document.getElementById(tableID);
                            console.log(tableID);
                            var tableHTML = tableSelect.outerHTML.replace(/ /g, '%20');
                            // Specify file name
                            filename = filename ? filename + '.xls' : 'excel_data.xls';

                            // Create download link element
                            downloadLink = document.createElement("a");

                            document.body.appendChild(downloadLink);

                            if (navigator.msSaveOrOpenBlob) {
                                var blob = new Blob(['\ufeff', tableHTML], {
                                    type: dataType
                                });
                                navigator.msSaveOrOpenBlob(blob, filename);
                            } else {
                                // Create a link to the file
                                downloadLink.href = 'data:' + dataType + ', ' + tableHTML;

                                // Setting the file name
                                downloadLink.download = filename;

                                //triggering the function
                                downloadLink.click();
                            }
                        }
 </script>

Here is the button I am using:

<p:commandButton id ="exportExcelFile" value="exportExcelFile" onclick="exportTableToExcel('datalist')"/>

When I use DataExporter I am running the following and it seems to work fine(other than the url problem not being shown as hyperlink on excel), so I export all the data that is being shown at this specific time on the datatable:

<p:dataExporter type="xls" target="datalist" fileName="payments"/>

Unfortunately,when I use the Javascript way to export the data, no matter what I have tried, datalist data is null when it is given as input to the Javascript function. This is the error I get: Uncaught TypeError: tableSelect is null. How can I pass the values that are being shown in the datatable so I can export them to an excel file?