TableTools僅導出單個標題行

Question

我使用DataTables jquery plugin

我有了多行表頭與合併單元格的DataTable。 喜歡的東西：

<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> 

然而，當我使用TableTools插件來然後導出除「打印」選項，所有的休息（Excel中，CSV，PDF等）僅具有「2級」標題行，而不是級別1。

有關如何讓它導出的任何建議也是1級？

Answer 1

編輯TableTools.js。
查找_fnGetDataTablesData和裏面更改此：

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)); 
    } 
} 

我現在不能測試此roght，那麼試試這個。
當我從Allan獲得更好的解決方案時，我會更新我的答案。

Answer 2

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; 
    } 

Answer 3

如果你要導出1級也出類拔萃，還存在另一種方式：

空細胞像更換行跨度/列跨度：

<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> 

然後由@misiu上述建議，編輯TableTools.js。
查找_fnGetDataTablesData和裏面更改此：

if (oConfig.bHeader) { ... } 

以此爲：

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)); 
    } 
} 

這將複製/導出複雜的頭到CSV/Excel中。雖然空表格單元格在Excel中將保持爲空，並且不會合並。您可以手動合併它們。

雖然不是一個理想的解決方案，但現在這對我來說非常合適。

Answer 4

看看這個答案https://datatables.net/forums/discussion/22592/export-multiple-row-headers 有了這一段代碼，你就可以將所有細胞從出口標題和列跨度和rowspans將在空單元格:)