動態分組列數 - 數據表 jquery

Question

我正在嘗試從我的 API 中獲取數據，並以按貨件類型（圖中的貨件類型 A 和貨件類型 B）分組的方式顯示它。 每種貨件類型都有不同的重量類別，每種重量都有一個國家/地區的特定價格值。 例如，

裝運類型 A - 德國 - 重量 = 1kg - 價格 = 20€

等等。 想法是利用數據表排序和搜索過濾器輕松搜索特定的貨運類型和國家。 此外，使這些價格列內聯可編輯。

由於整個項目使用基於 jQuery 的數據表，因此我想堅持使用它，但是我找不到使用數據表實現此目的的方法。

我查了一下， https://datatables.net/extensions/rowgroup/examples/initialisation/multipleGroups.html

並嘗試自定義它，這是我能找到的最接近的，但找不到實現這一目標的方法。

像這樣的東西，能夠利用數據表的搜索和排序功能。

 <table> <tbody> <tr> <td colspan="5">DHL</td> </tr> <tr> <td></td> <td>1</td><td>2</td><td>3</td><td>4</td><td>5</td> </tr> <tr> <td>Germany</td> <td>20</td><td>30</td><td>40</td><td>50</td><td>60</td> </tr> <tr> <td>Austria</td> <td>120</td><td>130</td><td>140</td><td>X</td><td>610</td> </tr> <tr> <td colspan="5">UPS</td> </tr> <tr> <td></td> <td>1</td><td>2</td><td>3</td><td>4</td><td>5</td> </tr> <tr> <td>Germany</td> <td>20</td><td>30</td><td>40</td><td>50</td><td>60</td> </tr> <tr> <td>Austria</td> <td>120</td><td>130</td><td>140</td><td>X</td><td>610</td> </tr> </tbody> </table>

Answer 1

以下示例基於此處的演示。

這是單行分組（不是多行分組），因為問題中的示例數據只有一個組。

它使用以下標准腳本和 CSS 文件，並添加了兩個“行組”插件文件：

<head>
  <meta charset="utf-8">
  <title>Demo</title>
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css">
  <!-- this next one is optional: -->
  <link rel="stylesheet" type="text/css" href="https://datatables.net/media/css/site-examples.css">

  <!-- row group plugin -->
  <link href="https://cdn.datatables.net/rowgroup/1.0.2/css/rowGroup.dataTables.min.css" rel="stylesheet" type="text/css" />
  <script src="https://cdn.datatables.net/rowgroup/1.0.2/js/dataTables.rowGroup.min.js"></script>

</head>

測試數據如下：

<table id="example" class="display dataTable cell-border" style="width:100%">
    <thead>
        <tr>
            <th>Shipment Type</th>
            <th>Country</th>
            <th>Weight Category</th>
            <th>Price</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Shipment Type A</td>
            <td>Germany</td>
            <td>1</td>
            <td>20</td>
        </tr>
        <tr>
            <td>Shipment Type A</td>
            <td>Germany</td>
            <td>2</td>
            <td>30</td>
        </tr>
        <tr>
            <td>Shipment Type A</td>
            <td>Germany</td>
            <td>3</td>
            <td>40</td>
        </tr>
        <tr>
            <td>Shipment Type A</td>
            <td>Austria</td>
            <td>1</td>
            <td>90</td>
        </tr>
        <tr>
            <td>Shipment Type A</td>
            <td>Austria</td>
            <td>2</td>
            <td>120</td>
        </tr>
        <tr>
            <td>Shipment Type A</td>
            <td>Austria</td>
            <td>3</td>
            <td>140</td>
        </tr>

        <tr>
            <td>Shipment Type B</td>
            <td>Germany</td>
            <td>1</td>
            <td>30</td>
        </tr>
        <tr>
            <td>Shipment Type B</td>
            <td>Germany</td>
            <td>2</td>
            <td>40</td>
        </tr>
        <tr>
            <td>Shipment Type B</td>
            <td>Germany</td>
            <td>3</td>
            <td>55</td>
        </tr>
        <tr>
            <td>Shipment Type B</td>
            <td>Austria</td>
            <td>1</td>
            <td>40</td>
        </tr>
        <tr>
            <td>Shipment Type B</td>
            <td>Austria</td>
            <td>2</td>
            <td>100</td>
        </tr>
        <tr>
            <td>Shipment Type B</td>
            <td>Austria</td>
            <td>3</td>
            <td>100</td>
        </tr>

    </tbody>
    <tfoot>
        <tr>
            <th>Shipment Type</th>
            <th>Country</th>
            <th>Weight Category</th>
            <th>Price</th>
        </tr>
    </tfoot>
</table>

DataTables初始化代碼如下：

<script type="text/javascript">

var collapsedGroups = {};
var dtable;

$(document).ready(function() {
    $('#example').DataTable( {
        "pageLength": 50,
        rowGroup: {
            dataSrc: 0,

            startRender: function(rows, group) {
                var collapsed = !!collapsedGroups[group];
                rows.nodes().each(function (r) {
                    r.style.display = collapsed ? 'none' : '';
                });    

                var toggleClass = collapsed ? 'fas fa-chevron-up' : 'fas fa-chevron-down';

                // Add category name to the <tr>. NOTE: Hardcoded colspan
                return $('<tr/>')
                    .append('<td colspan="' + rows.columns()[0].length + 
                            '"><i class="'+ toggleClass + '"></i> ' + 
                            group + ' (' + rows.count() + ')</td>')
                    .attr('data-name', group)
                    .toggleClass('collapsed', collapsed);
            }

        }

    } );
} );

</script>

最終結果如下所示：

可以按通常的方式對數據進行排序和過濾。

動態分組列數 - 數據表 jquery

問題描述

1 個解決方案

解決方案1
0 2020-06-07 00:01:28

動態分組列數 - 數據表 jquery

問題描述

1 個解決方案

解決方案1 0 2020-06-07 00:01:28

解決方案1
0 2020-06-07 00:01:28