DataTables добавить пользовательскую фильтрацию по колонкам и окрашивание ячеек по условию

Question

Есть простая DataTables для визуализации данных из статичного json файла.

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Spreadsheet</title>
</head>
<body>
<link rel="stylesheet" href="https://cdn.datatables.net/2.2.2/css/dataTables.dataTables.css"/>
<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
<script src="https://cdn.datatables.net/2.2.2/js/dataTables.js"></script>

<script>
    $(document).ready( function () {
    const options = {
        ajax: {
            url: 'test.json',
            dataSrc: ''
        },
        columns: [
            { data: 'server' },
            { data: 'tariff' },
            { data: 'stop_time' }
        ],
        paging: false
        };
    const table = $('#spreadsheet').DataTable(options);
} );
</script>

<table id="spreadsheet" class="display">
    <thead>
    <tr>
        <td>server</td>
        <td>tariff</td>
        <td>stop_time</td>
    </tr>
    </thead>
    <tfoot>
    <tr>
        <td>server</td>
        <td>tariff</td>
        <td>stop_time</td>
    </tr>
    </tfoot>
</table>
</body>
</html>

Фрагмент данных из test.json, некоторые поля объекта могут быть null.

[
    {
        "server": null,
        "stop_time": "2020-01-01",
        "tariff": null
    },
    {
        "server": "4.20",
        "stop_time": "2025-11-01",
        "tariff": "pro"
    },
    {
        "server": "7.40",
        "stop_time": null,
        "tariff": "lite"
    }
    ...
]

Помогите, пожалуйста:

Адаптировать этот пример Individual column filtering для моей таблицы
Добавить окрашивание ячейки stop_time в красный, если указаная в ней дата в прошлом

Answer 1

Что именно вызвало сложности? Пример с фильтрацией копируется практически 1:1, за исключением создания таблицы. С условной стилизацией тоже не очень сложно. Первый же результат в Google по запросу "datatables.net conditional styling" ведёт на вопрос "Conditional Styling" на их собственном форуме, ответ оттуда ведёт на описание функции-коллбэка createdCell, вызываемой при создании ячейки.

Кроме того, в вашей исходной разметке небольшая ошибка, для того, чтобы к заголовку и футеру таблицы применялись родные стили от DataTables, ячейки в элементах <thead> и <tfoot> надо создавать с помощью тега <th>, а не <td>.

Всё вместе выглядит примерно так (по очевидным причинам вместо AJAX-вызова я заполняю таблицу статическими данными):

const data = [
  {
    "server": null,
    "stop_time": "2020-01-01",
    "tariff": null
  },
  {
    "server": "4.20",
    "stop_time": "2025-11-01",
    "tariff": "pro"
  },
  {
    "server": "7.40",
    "stop_time": null,
    "tariff": "lite"
  }
]

// Вычисление текущей даты
const now = new Date();

const options = {
  data: data,
  columns: [
    { data: 'server' },
    { data: 'tariff' },
    {
      data: 'stop_time',
      // Функция-коллбэк, вызываемая при создании ячейки таблицы в третьем столбце
      // и добавляющая к ней класс 'outdated', если дата в ячейке меньше текущей даты
      createdCell: function (td, cellData, rowData, row, col) {
        const date = new Date(cellData);
        if (cellData && (date < now)) {
          $(td).addClass('outdated');
        }
      }
    }
  ],
  paging: false
};

$(document).ready(function () {
  // Создание фильтров в футере таблицы,
  // скопировано 1:1 из примера на сайте DataTables
  $('#spreadsheet tfoot th').each(function (i) {
    let title = $('#spreadsheet thead th')
      .eq($(this).index())
      .text();
    $(this).html(
      '<input type="text" placeholder="' + title + '" data-index="' + i + '" />'
    );
  });

  // Создание таблицы
  const table = $('#spreadsheet').DataTable(options);

  // Привязка обработчиков изменения содержимого в фильтрах,
  // скопировано 1:1 из примера на сайте DataTables
  $(table.table().container()).on('keyup', 'tfoot input', function () {
    table
      .column($(this).data('index'))
      .search(this.value)
      .draw();
  });
});

.outdated {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/2.2.2/js/dataTables.js"></script>
<link href="https://cdn.datatables.net/2.2.2/css/dataTables.dataTables.css" rel="stylesheet"/>

<table id="spreadsheet" class="display">
  <thead>
    <tr>
      <th>server</th>
      <th>tariff</th>
      <th>stop_time</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th>server</th>
      <th>tariff</th>
      <th>stop_time</th>
    </tr>
  </tfoot>
</table>

БЛОГ НА HUSL

DataTables добавить пользовательскую фильтрацию по колонкам и окрашивание ячеек по условию

Ответы (1 шт):