javascript - 如何使用 rowsGroup 和 rowGroup 扩展为数据表中的每个组带来汇总（汇总总和）

Question

我有动态数据表，它通过从列表中选择列来填充。我在数据表中添加了 rowGroup 选项以应用分组，这工作正常。我需要每个组的（总和）聚合。在此处查看演示。提前致谢。

标签： javascriptjquerydatatablesdatatables-1.10

Answer 1

您可以定义一个数组，其中包含您想要求和的列的索引。然后在endRender函数中，您可以遍历每一列并计算总和。

$(document).ready( function () {
var data = [
  ['subgroupN', 'Group1', 'sub-subgroupN', 'ElementN', '200', '200'],
  ['subgroup1', 'Group2', 'sub-subgroup1', 'Element1', '150', '150'],
  ['subgroup2', 'Group2', 'sub-subgroup1', 'Element1', '650', '650'],
  ['subgroup2', 'Group2', 'sub-subgroup1', 'Element1', '650', '650'],
  ['subgroup2', 'Group2', 'sub-subgroup2', 'Element3', '700', '700'],
  ['subgroup2', 'Group2', 'sub-subgroup2', 'Element4', '850', '850'],
  ['subgroup2', 'Group2', 'sub-subgroup2', 'Element2', '350', '350'],
  ['subgroup3', 'Group1', 'sub-subgroup1', 'Element1', '267', '267'],
  ['subgroup3', 'Group1', 'sub-subgroup1', 'Element1', '2563', '2563'],
  ['subgroup2', 'Group2', 'sub-subgroup2', 'Element1', '2001', '2001'],
  ['subgroup4', 'Group2', 'sub-subgroup2', 'Element1', '2015', '2015'],
  ['subgroup4', 'Group2', 'sub-subgroup3', 'Element10', '3365', '3365'],
  ['subgroup4', 'Group2', 'sub-subgroup3', 'Element231', '4125', '4125'],
],
// define the columns index for which you want to calculate the sum
columns = [4, 5],
table = $('#example').DataTable({
  columns: [
    {
      title: 'First group',
    },
    {
      name: 'second',
      title: 'Second group [order first]',
    },
    {
      title: 'Third group',
    },
    {
      title: 'Forth ungrouped',
    },
    {
      title: 'Fifth ungrouped',
    },
    {
      title: 'Sixth ungrouped',
    },
  ],
  data: data,
    rowsGroup:[
      0,1,2,3
    ],
  rowGroup: {
    endRender: function ( rows, group ) {
      var result = '';
      columns.forEach(function(column) {
        var ageAvg = rows.data().pluck(column).reduce( function (a, b) {
          return a + b*1;
        }, 0);
        result += 'column ' + column + ': ' + ageAvg + "</br>";
      });
      return group + "</br>" + result;
    }, 
    startRender: null
  },
  pageLength: '25',
});

$(document).ready(function() {
  var data = [
    ['subgroupN', 'Group1', 'sub-subgroupN', 'ElementN', '200', '200'],
    ['subgroup1', 'Group2', 'sub-subgroup1', 'Element1', '150', '150'],
    ['subgroup2', 'Group2', 'sub-subgroup1', 'Element1', '650', '650'],
    ['subgroup2', 'Group2', 'sub-subgroup1', 'Element1', '650', '650'],
    ['subgroup2', 'Group2', 'sub-subgroup2', 'Element3', '700', '700'],
    ['subgroup2', 'Group2', 'sub-subgroup2', 'Element4', '850', '850'],
    ['subgroup2', 'Group2', 'sub-subgroup2', 'Element2', '350', '350'],
    ['subgroup3', 'Group1', 'sub-subgroup1', 'Element1', '267', '267'],
    ['subgroup3', 'Group1', 'sub-subgroup1', 'Element1', '2563', '2563'],
    ['subgroup2', 'Group2', 'sub-subgroup2', 'Element1', '2001', '2001'],
    ['subgroup4', 'Group2', 'sub-subgroup2', 'Element1', '2015', '2015'],
    ['subgroup4', 'Group2', 'sub-subgroup3', 'Element10', '3365', '3365'],
    ['subgroup4', 'Group2', 'sub-subgroup3', 'Element231', '4125', '4125'],

  ];
  var columns = [4, 5];
  var table = $('#example').DataTable({
    columns: [{
        title: 'First group',
      },
      {
        name: 'second',
        title: 'Second group [order first]',
      },
      {
        title: 'Third group',
      },
      {
        title: 'Forth ungrouped',
      },
      {
        title: 'Fifth ungrouped',
      },

      {
        title: 'Sixth ungrouped',
      },
    ],
    data: data,
    rowsGroup: [
      0, 1, 2, 3
    ],
    rowGroup: {

      endRender: function(rows, group) {
        var result = '';
        columns.forEach(function(column) {
          var ageAvg = rows
            .data()
            .pluck(column)
            .reduce(function(a, b) {
              return a + b * 1;
            }, 0);
          result += 'column ' + column + ': ' + ageAvg + "</br>";
        });

        return group + "</br>" + result;
      },
      startRender: null
    },

    pageLength: '25',
  });
});

body {
  font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
  color: #333;
  background-color: #fff;
}

div.container {
  min-width: 980px;
  margin: 0 auto;
}

<!DOCTYPE html>
<html>

<head>
  <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
  <link href="//cdn.datatables.net/rowgroup/1.0.4/css/rowGroup.dataTables.min.css" rel="stylesheet" type="text/css" />
  <link href="//datatables.net/download/build/nightly/jquery.dataTables.css" rel="stylesheet" type="text/css" />
  <script src="//datatables.net/download/build/nightly/jquery.dataTables.js"></script>
  <script src="//cdn.rawgit.com/ashl1/datatables-rowsgroup/v1.0.0/dataTables.rowsGroup.js"></script>
  <script src="//cdn.datatables.net/rowgroup/1.0.4/js/dataTables.rowGroup.min.js"></script>


  <meta charset=utf-8 />
  <title>DataTables - JS Bin</title>
</head>

<body>
  <div class="container">
    <table id="example" class="display" width="100%">
    </table>
  </div>
</body>

</html>