excelhtml5 is not exporting data of html table having th tag with id element

Bmkotkar

DataTable export:-

{"extend":"excelHtml5", "text":'<i class="far fa-fw fa-file-excel"></i> Spreadsheet',"titleAttr":"Create an Excel file", "exportOptions": {"orthogonal":'export', "columns":[":not('.noExport')"]}, "title":serviceContext.orgName+" Students in Session Export", "autoFilter": true, "sheetName":"Exported data" },

HTML table:-

<thead>
<tr>
                        <th>Firstname</th>
                        <th>Lastname</th>
                        <th>Grade</th>                                      
                        <th id="username">Username</th>
                        <th id="password">Password</th>
                        <th>Scores</th>
                        <th>Notes</th>
                    </tr>
                </thead>

Error:-

datatables.min.js:71 Uncaught TypeError: Cannot read properties of undefined (reading 'length')
    at datatables.min.js:71:21536
    at X.action (datatables.min.js:71:21851)
    at r (datatables.min.js:51:6771)
    at datatables.min.js:51:6949

Description of the problem:-
if Html table has id element in it then excel spreadsheet export option throws above error. however for rest of the options like csv and pdf it works fine.

Edited by Kevin: Syntax highlighting. Details on how to highlight code using markdown can be found in this guide

kthorngren

I'm not sure how the HTML table having an id would affect the Excel export. I put your code snippet works in this test case with the HTML table having an id:
https://live.datatables.net/tuwuquko/1/edit

Please provide a link to your page or a test case replicating the issue so we can help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

Bmkotkar

Its not table having id., issue is <th> table header having id is causing an issue.
Please find below link for live example:
https://jsbin.com/ganicehiju/edit?html,js,output

<th id="username">Username</th>
<th id="password">Password</th>
above fields are causing issues.

Bhagyashree.

allan

Your example doesn't appear to run? Even if I add the DataTables / Buttons libraries:

<link href="https://cdn.datatables.net/v/dt/jq-3.7.0/jszip-3.10.1/dt-2.1.6/b-3.1.2/b-html5-3.1.2/datatables.min.css" rel="stylesheet">
 
<script src="https://cdn.datatables.net/v/dt/jq-3.7.0/jszip-3.10.1/dt-2.1.6/b-3.1.2/b-html5-3.1.2/datatables.min.js"></script>

It still doesn't run with the error:

Uncaught ReferenceError: serviceContext is not defined

Here is a trivial example with two header cells which have id attributes and Excel export works without issue.

Perhaps you can update your example to run and demonstrate the issue you are having so I can attempt to debug it.

Allan

Bmkotkar

Actually Allan.,
What I have used is just a snippet taken from the big fat project., and hence it has many dependent things.
Sorry for inconvenience.

Actually this columns are getting collapsed while datatable rendering
<th id="username">Username</th>
<th id="password">Password</th>

and hence they are not accessible in excel export

allan

That's no problem. If you could provide a minimal example demonstrating the issue I'd be happy to take a look into the problem. You could use the one I provided as a starting point.

Allan

Bmkotkar

Allan,
I couldn't get the working solution for you to debug.,
however there is one thing which we are doing is based upon id provided in <th> tag, we are updating this <th> headername using jquery and after that this header name is passed as undefined.
below are the lines where we are updating those headernames
$("#username",dt.table().header()).text('Access Code')
$("#password",dt.table().header()).text('Test ID')

and after this updation, this headers are passed/working as a undefined

allan

With those two lines added I get an error: https://live.datatables.net/hogimeqe/4/edit .

I would suggest using column().title() to set a column's title. The problem with writing in your own content is that it is removing the elements that DataTables is putting in and using. You'll notice for example that the sort icons have been removed from those header cells.

If you must manipulate the HTML without using the API, then write into the span.dt-column-title elements: https://live.datatables.net/cuzowaha/1/edit .

Allan

Bmkotkar

Thank you so much Allan.
This solution has resolved my issue.