「複雜標題」在當前DataTables.net版本中不響應？

DataTables允許您創建「複雜標題」（這需要跨越多個列或行）。響應式插件與此兼容，如果您按照documentation添加一些額外的CSS。「複雜標題」在當前DataTables.net版本中不響應？

這裏是工作提琴：https://jsfiddle.net/hmr9qtx3/1/

正如你所看到的，調整的渲染輸出幀正確地去除該行的<th>標籤。這與DataTables的版本1.10.1和響應的1.0.0有關。

最新的DataTables版本是1.10.12，其包裝的Responsive版本是2.1.0。這裏有一個相同的撥弄換出那些版本：https://jsfiddle.net/hmr9qtx3/

工作和非工作版本號之間，數據表的使用和響應的插件是相同的。

您會注意到響應式插件對非跨表表頭和表體正確運行。但是，頁面調整大小足以添加滾動條/溢出時，不會從DOM中刪除跨頁眉。

我該如何解決或修補我的代碼，使跨頁眉響應像在工作小提琴？我寧願不使用舊版本的插件。

來源

2016-09-28 David

一個乾淨的解決方案，它工作得很好是複雜的標題行前添加一個副本，零高度列的空行，然後按列的實際行。

<thead> 
    <tr><th></th><th></th><th></th></tr> 
    <tr><th colspan="2">Complex!</th><th>yeah</th></tr> 
    <tr><th>One</th><th>Two</th><th>Three</th></tr> 
</thead>

這是因爲FixedHeader針對它thead認定爲上漿的第一行。如果您正確設置了虛擬行的大小，其他所有人都會跟隨。

我更喜歡這個解決方案之前有一個官方的修復，因爲它不需要我們維護FixedHeader的補丁版本，並且當一個官方修復發佈將優雅地退化，並在我們的休閒可移動。

來源

2017-02-07 19:29:19 David

響應插件2.0不支持複雜頭文件，請參閱this thread或this issue #59。

作爲解決方法，您可以繼續使用響應式插件1.0和最新版本的jQuery DataTables。

每author's post：

不幸的是，是的，這是在響應2.0的限制。（...）計劃是解決2.1。（...）目前唯一的選擇是回滾到Responsive 1.x恐怕。

儘管您使用的是v2.1.0，但可能還沒有添加，因爲GitHub上的issue #59仍然處於打開狀態。

來源

2016-09-28 16:46:23

「限制」呃，我想我們已經取消了「bug」這個詞！謝謝，這工作！ – David

我正在使用2.1.1，但問題仍然存在.... – Legends

我爲響應式插件的此問題創建了即時修復程序。

問題：（最後一欄消失）

數據表1.10.13
燙→ datatables.responsive 2.1.1

添加到datatables.net響應支持Complex Headers

這個hot-fix在我的頁面上工作得很好我有不同類型的數據表，但是，請注意這個補丁，因爲它沒有用所有可能的dt特性/類型進行測試。

這裏是一個工作演示：jsBin-Demo

_setColumnVis: function (col, showHide) { 
    var dt = this.s.dt; 
    var display = showHide ? '' : 'none'; // empty string will remove the attr 

    $(dt.column(col).header()).css('display', display); 
    $(dt.column(col).footer()).css('display', display); 
    dt.column(col).nodes().to$().css('display', display); 

    var parentrow = $(dt.column(col).header()).parent().prev("tr"); 

    var visibleSiblingCount = $(dt.column(col).header()).siblings("th").filter(function (idx, el) { 
     return $(el).is(":visible"); 
    }).length; 

    if (parentrow.length > 0 && visibleSiblingCount != 1) { 

     if (parentrow.find("th:nth-child(" + col + ")").attr("rowspan") == 1) { 
      parentrow.find("th:nth-child(" + col + ")").css('display', display); 
     } else { 
      parentrow.find("th:nth-child(" + (col + 1) + ")").css('display', display); 
     } 
    } 
},

來源

2017-02-06 16:19:57 Legends

該函數計算可見列的數量。然後通過標題循環以使它們匹配。我希望這可以作爲一個補丁，直到響應更新。你將不得不把這放在文檔加載和窗口調整大小功能。

function makeColumnsResponsive() { 
    const visibleColumnCount = $('tbody tr:first-child td:visible').length - 1; 
    $('thead tr th').show(); 
    for (let i = 1; i <= $('thead tr').length; i++) { 
     $('thead tr:nth-child(' + i + ') th:gt(' + visibleColumnCount + ')').hide(); 
    } 
}

來源

2018-02-12 02:18:11 boristotle

「複雜標題」在當前DataTables.net版本中不響應？

回答

相關問題