Geek Answers Handbook

TableTools exports only one header row

I am using DataTables jquery plugin

I have a DataTable that has a multi-line table header with colspan. Sort of:

<thead> <tr> <th>Level 1</th> <th colspan='2'>Level 1 - Item 1</th> <th colspan='2'>Level 1 - Item 2</th> </tr> <tr> <th>Level 2</th> <th>Level 2 - Item 1a</th> <th>Level 2 - Item 1b</th> <th>Level 2 - Item 2a</th> <th>Level 2 - Item 2b</th> </tr> </thead>

However, when I use the TableTools plugin for export, except for the "Print" option, all the rest (Excel, CSV, Pdf, etc.) have only the "Level 2" title bar, not level 1.

Any suggestions on how to get it for export also level 1?

+4
source share
4 answers

If you want to export level1 also to excel, there is an alternative way:

Replace rowspan / colspan with empty cells like:

  <thead> <tr> <th>Level 1</th> <th>Level 1 - Item 1</th> <th></th> <th>Level 1 - Item 2</th> <th></th> </tr> <tr> <th>Level 2</th> <th>Level 2 - Item 1a</th> <th>Level 2 - Item 1b</th> <th>Level 2 - Item 2a</th> <th>Level 2 - Item 2b</th> </tr> </thead>

Then, as suggested by @misiu above, Edit TableTools.js.
Find _fnGetDataTablesData and inside it change this:

 if (oConfig.bHeader) { ... }

with this like:

 if (oConfig.bHeader) { //another loop for (i = 0, rowCount = dt.nTHead.rows.length; i < rowCount; i++) { aRow = []; //clear row data for (j = 0, iLen = dt.aoColumns.length; j < iLen; j++) { if (aColumnsInc[j] && dt.nTHead.rows[i].children[j] !== null) { sLoopData = dt.nTHead.rows[i].children[j].innerHTML.replace(/\n/g, " ") .replace(/<.*?>/g, "") .replace(/^\s+|\s+$/g, ""); sLoopData = this._fnHtmlDecode(sLoopData); aRow.push(this._fnBoundData(sLoopData, oConfig.sFieldBoundary, regex)); } else { aRow.push(this._fnBoundData("", oConfig.sFieldBoundary, regex)); //I'm not shure of this!! } } aData.push(aRow.join(oConfig.sFieldSeperator)); } }

This will copy / export complex headers to csv / excel. Although empty table cells remain empty in excel and will not be merged. You can manually combine them.

Although this is not an ideal solution, for me it worked great now.

+2
source

Edit TableTools.js.
Find _fnGetDataTablesData and inside it change this:

 if (oConfig.bHeader) { aRow = []; for (i = 0, iLen = dt.aoColumns.length; i < iLen; i++) { if (aColumnsInc[i]) { sLoopData = dt.aoColumns[i].sTitle.replace(/\n/g, " ") .replace(/<.*?>/g, "") .replace(/^\s+|\s+$/g, ""); sLoopData = this._fnHtmlDecode(sLoopData); aRow.push(this._fnBoundData(sLoopData, oConfig.sFieldBoundary, regex)); } } aData.push(aRow.join(oConfig.sFieldSeperator)); }

:

 if (oConfig.bHeader) { //another loop for (i = 0, rowCount = dt.nTHead.rows.length; i < rowCount; i++) { aRow = []; //clear row data for (j = 0, iLen = dt.aoColumns.length; j < iLen; j++) { if (aColumnsInc[j] && dt.nTHead.rows[i].children[j] !== null) { sLoopData = dt.nTHead.rows[i].children[j].innerHTML.replace(/\n/g, " ") .replace(/<.*?>/g, "") .replace(/^\s+|\s+$/g, ""); sLoopData = this._fnHtmlDecode(sLoopData); aRow.push(this._fnBoundData(sLoopData, oConfig.sFieldBoundary, regex)); } else { aRow.push(this._fnBoundData("", oConfig.sFieldBoundary, regex)); //I'm not shure of this!! } } aData.push(aRow.join(oConfig.sFieldSeperator)); } }

I can't check it now, so give it a try. I will update my answer when I get the best solution from Allan.

+1
source 
 if ( oConfig.bHeader ) { //-1 because we don't want the last row header for (i=0; i<dt.nTHead.rows.length-1; i++) { //wrap jquery object $(dt.nTHead.rows[i]).find('th').each(function(){ var th = $(this); sData += th.text().replace(/\n/g," ").replace( /<.*?>/g, "" ).replace(/^\s+|\s+$/g,""); var colspan = th.attr('colspan'); if (!colspan) colspan = 1; //default colspan is 1 //only the first colspan have the label, other colspans are empty text, we can't implement cell mergin in csv file for (j=0; j<colspan; j++) { sData += oConfig.sFieldSeperator; } }); sData += sNewline; } for ( i=0, iLen=dt.aoColumns.length ; i<iLen ; i++ ) { if ( aColumnsInc[i] ) { sLoopData = dt.aoColumns[i].sTitle.replace(/\n/g," ").replace( /<.*?>/g, "" ).replace(/^\s+|\s+$/g,""); sLoopData = this._fnHtmlDecode( sLoopData ); sData += this._fnBoundData( sLoopData, oConfig.sFieldBoundary, regex ) + oConfig.sFieldSeperator; } } sData = sData.slice( 0, oConfig.sFieldSeperator.length*-1 ); sData += sNewline; }
0
source

Take a look at this answer https://datatables.net/forums/discussion/22592/export-multiple-row-headers With this code snippet you can export all cells from the header, and colspan and rowspans will be converted to empty cells :)

0
source

More articles:


All Articles