分组数据表答案

【问题标题】：Group datatables分组数据表
【发布时间】：2021-08-12 20:05:02
【问题描述】：

我正在使用数据表插件：

我需要对第 2 列的数据进行分组，我正在使用下面的代码， HTML：

<table class="table table-stripped table-bordered table-sm mytable  ">
    <thead>
        <tr>
            <th>{{ __('code') }}</th>
            <th >{{ __('value1') }}</th>
            <th >{{ __('description') }}</th>
            <th >{{ __('quantity') }}</th>
            <th >{{ __('amount') }}</th>
            <th >{{ __('total') }}</th>
            <th ></th>
        </tr>
    </thead>
    <tbody class="provider_cpts_div"> 
        <tr>
            <td>33</td>
            <td>xx</td>
            <td>www</td>
            <td>ww</td>
            <td>ww</td>
            <td>ww</td>
            <td>ww</td>
        </tr>
        <tr>
            <td>33</td>
            <td>xx</td>
            <td>www</td>
            <td>ww</td>
            <td>ww</td>
            <td>ww</td>
            <td>ww</td>
        </tr>  
    </tbody>
</table>

脚本：

var collapsedGroups = {};

        var CptTable = $('.mytable').DataTable({

            rowGroup: {
            // Uses the 'row group' plugin
            dataSrc: 1,
         startRender: function(rows, group) {
        var collapsed = !!collapsedGroups[group];

        rows.nodes().each(function(r) {
          r.style.display = 'none';
          if (collapsed) {
            r.style.display = '';
          }
        });

        // Add category name to the <tr>. NOTE: Hardcoded colspan
        return $('<tr/>')
          .append('<td >' + group + ' (' + rows.count() + ')</td>')
          .attr('data-name', group)
          .toggleClass('collapsed', collapsed);
      }
    }
        });

        $('.mytable  tbody').on('click', 'tr.group-start', function() {
            var name = $(this).data('name');
            collapsedGroups[name] = !collapsedGroups[name];
            CptTable.draw(false);
         });

它不工作，似乎我错过了什么这基于样本： https://jsfiddle.net/lbriquet/ua4yLscx/

我不确定我错过了什么

【问题讨论】：

你能解释一下“它不起作用”是什么意思吗？据我所知，它似乎工作正常。
您可能应该将order: [ [1, 'asc'] ], 添加到DataTable，以便初始排序与分组匹配。而且您可能在样式名称table-stripped 中有错字（应该是“条纹”而不是“条纹”吗？）。但除此之外，究竟是什么不起作用？

标签： html jquery datatables

【解决方案1】：

缺少的是“行组”插件，

我添加了 .js 和 .css

<script src="https://cdn.datatables.net/rowgroup/1.0.2/js/dataTables.rowGroup.min.js"></script>

<link href="https://cdn.datatables.net/rowgroup/1.0.2/css/rowGroup.dataTables.min.css" rel="stylesheet">

这解决了我的问题...

【讨论】：