Question

我正在尝试合并“日期”和“当前状态”列，并使它们的值等于它们各自分组中的最后一个单元格的值。我对DataTables和行分组知之甚少，无法用JavaScript做到这一点。只需使用colspan调整列并将值设置为最后一行，就可以更改整个列的值，而无需考虑分组。

var Rowgroup = function() {

  var initTable = function() {
    var table = $('#table');
    table.DataTable({
      responsive: true,
      order: [
        [0, 'asc']
      ],
      rowGroup: {
        dataSrc: 0,
      }
    });
  };
  return {
    init: function() {
      initTable();
    },
  };
}();
jQuery(document).ready(function() {
  Rowgroup.init();
});

<head>
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jq-3.3.1/dt-1.10.18/rg-1.1.0/datatables.min.css" />

  <script type="text/javascript" src="https://cdn.datatables.net/v/dt/jq-3.3.1/dt-1.10.18/rg-1.1.0/datatables.min.js"></script>
</head>

<body>
  <div>
    <table class="table table-hover" id="table">
      <thead>
        <tr>
          <th>ID</th>
          <th>Date</th>
          <th>Notes</th>
          <th>Current Status</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>808</td>
          <td>5/1/2018</td>
          <td>Lorem ipsum ut porta.</td>
          <td>Active</td>
        </tr>
        <tr>
          <td>808</td>
          <td>5/1/2018</td>
          <td>Netus blandit ante felis.</td>
          <td>Active</td>
        </tr>
        <tr>
          <td>808</td>
          <td>5/1/2018</td>
          <td>Vel fusce tortor.</td>
          <td>Inactive</td>
        </tr>
        <tr>
          <td>698</td>
          <td>5/15/2018</td>
          <td>Per sit commodo.</td>
          <td>Inactive</td>
        </tr>
        <tr>
          <td>698</td>
          <td>5/15/2018</td>
          <td>Hendrerit imperdiet.</td>
          <td>Inactive</td>
        </tr>
        <tr>
          <td>698</td>
          <td>5/15/2018</td>
          <td>Class augue phasellus.</td>
          <td>Active</td>
        </tr>
        <tr>
          <td>698</td>
          <td>5/15/2018</td>
          <td>Ante aliquet.</td>
          <td>Active</td>
        </tr>
      </tbody>
    </table>
  </div>
</body>

Answer 1

我明白了，您需要在组的最后一行的末尾添加某些文本（日期和状态）。

如果这是您一直追求的目标，则可以：

将每个组中的所有最后一行作为组行标题的先前相邻兄弟（具有默认类'dtrg-group'），再加上表的最后一行（对于最后一个组）：

const groupBottomRows = $('.dtrg-group').prev().add('tbody tr:last');

遍历这些行，从第2列和第4列（分别为索引1、3）中提取date和status：

const [date, status] = $(this).find('td:eq(1),td:eq(3)').toArray().map(td => $(td).text());

将那些附加到前面的组行标题中：

const groupHeader = $(this).prevAll('.dtrg-group').first().find('td');
$(groupHeader).text($(groupHeader).text() + `: ${date}, ${status}`);

该方法的完整实时演示，您可以在下面找到：

const table = $('#table').DataTable({
	responsive: true,
	rowGroup: {dataSrc: 0}
});

const groupBottomRows = $('.dtrg-group').prev().add('tbody tr:last');
$.each(groupBottomRows, function(){
	const [date, status] = $(this).find('td:eq(1),td:eq(3)').toArray().map(td => $(td).text());
	const groupHeader = $(this).prevAll('.dtrg-group').first().find('td');
	$(groupHeader).text($(groupHeader).text() + `: ${date}, ${status}`);
});

<head><link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jq-3.3.1/dt-1.10.18/rg-1.1.0/datatables.min.css" /><link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/rowgroup/1.1.0/css/rowGroup.dataTables.min.css" /><script type="application/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script><script type="text/javascript" src="https://cdn.datatables.net/v/dt/jq-3.3.1/dt-1.10.18/rg-1.1.0/datatables.min.js"></script><script type="application/javascript" src="https://cdn.datatables.net/rowgroup/1.1.0/js/dataTables.rowGroup.min.js"></script></head><body><div><table class="table table-hover" id="table"><thead><tr><th>ID</th><th>Date</th><th>Notes</th><th>Current Status</th></tr></thead><tbody><tr><td>808</td><td>5/1/2018</td><td>Lorem ipsum ut porta.</td><td>Active</td></tr><tr><td>808</td><td>5/1/2018</td><td>Netus blandit ante felis.</td><td>Active</td></tr><tr><td>808</td><td>5/1/2018</td><td>Vel fusce tortor.</td><td>Inactive</td></tr><tr><td>698</td><td>5/15/2018</td><td>Per sit commodo.</td><td>Inactive</td></tr><tr><td>698</td><td>5/15/2018</td><td>Hendrerit imperdiet.</td><td>Inactive</td></tr><tr><td>698</td><td>5/15/2018</td><td>Class augue phasellus.</td><td>Active</td></tr><tr><td>698</td><td>5/15/2018</td><td>Ante aliquet.</td><td>Active</td></tr></tbody></table></div></body>

合并每组最后一个值的列

1 个答案: