通過在 HTML/CSS + JS (Datatables) 中將兩列合並為一列來顯示表格

Question

我使用https://datatables.net/在我的網絡服務上呈現可排序和可搜索的表格。 我的桌子變得很寬，因為有很多列。 我想通過將相關列合並為一個來減小寬度。 同一行的兩個單元格的數據應顯示在一個帶有換行符的單元格中。

我想改變這個：

AB C
國防軍
GHJ

對此：

AB
... C
德
... F
生長激素
... Ĵ

這是我的 JS 示例

<script>
var dataSet =
[
    {"name": "A", "absolute": 10, "relative": 0.1},
    {"name": "B", "absolute": 20, "relative": 0.2},
    {"name": "C", "absolute": 11, "relative": -0.1},
    {"name": "D", "absolute": 100, "relative": 0.3},
    {"name": "E", "absolute": 8, "relative": 0.04},
];
$(document).ready(function ()
{
  $("#example").DataTable(
  {
    data: dataSet,
    columns:
    [
            { data: "name", title: "Name" },
            { data: "absolute" , title: "Absolute + <br> "Relative", render: function ( data, type, row, meta ) {
                return row.absolute + "<br>" + row.relative; }},
    ],
    "columnDefs": [{ targets: 'data-sortable', orderable: false }]
  });
 });
</script>
<table id="example" class="display" width="100%"></table>

在此示例中，我使用“渲染” function 將兩個數據列渲染為一個。 問題是，排序將在完整/連接/渲染的字符串上完成。 我仍然想按“絕對”和“相對”列進行排序。 表格的 header 應該有兩個“排序”按鈕，用於“組合”列。

是否有一些 html/css 技巧可以隱藏或 colspan 或其他任何東西來實現我的目標？ 我用谷歌搜索了很多，似乎我必須用 JS 自己編寫所有內容。 我找不到任何適合我的東西。 但是，有很多網頁具有合並列的功能，只是為了顯示。

這是來自 comdirect 銀行的表格示例。 在這里，您可以在一列中排序兩個或三個不同的值。 這正是我想要的

Answer 1

所以，我沒有找到一個簡單的方法來解決我的問題......我不得不自己編程 javascript。 這是我的解決方案：我的“老板桌”的 github 存儲庫

可能也可以為數據表編寫一些插件，但我不知道這是如何工作的。 我也是一個 javascript-noob ......所以我自己編寫它更容易。