分组数据表

Question

我正在使用数据表插件:

我需要根据第 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/

我不确定我错过了什么

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

这解决了我的问题...

分组数据表

Group datatables

html

jquery

datatables