Объединить столбцы с последним значением в группе - PullRequest
Новая
       19

Объединить столбцы с последним значением в группе

1 голос
/ 11 июля 2019

Я пытаюсь объединить столбцы «Дата» и «Текущее состояние» и сделать их равными значению последней ячейки в соответствующей группе.Я не знаю достаточно о 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>

1 Ответ

0 голосов
/ 12 июля 2019

Как я понял, вам нужно добавить к каждому заголовку группы определенный текст (дату и статус) из последней строки в группе.

Если вы добились этого, вы можете:

  • захватить все последние строки в каждой группе как предыдущие соседние элементы заголовков строк группы (с классом по умолчанию 'dtrg-group'), плюс последнюю строку таблицы (для последней группы): 
const groupBottomRows = $('.dtrg-group').prev().add('tbody tr:last');
  • переберите эти строки, извлеките date и status из столбцов 2 и 4 (индексы 1, 3 соответственно): 
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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...