jQuery DataTables: установить фильтр поиска для именованного столбца при инициализации

Question

По сути, я хочу выполнить эту команду при инициализации моих таблиц данных.

$('#trainings-table').DataTable().column('status:name').search('planned').draw();

Итак, что я пробовал:

$('#trainings-table').DataTable({
    columnDefs: [{
            targets: 'status:name',
            search: 'planned'
        },
    ]
})

Но это не сработало. Я также попытался изменить цель на точный номер столбца (например, targets: 2) и не использовать эту именованную цель, но это, похоже, не было проблемой.

Моя таблица данных:

<table id="trainings-table">
    <thead>
        <tr>
            <th data-name="name">description</th>
            <th data-name="status">Status</th>
            <th data-name="date">date</th>
            <th date-name="duration">days</th>
        </tr>
    </thead>
    <tbody>
        <!-- Expected behaviour: This row below should be hidden after initialization --> 
        <tr>
            <td>Training 1</td>
            <td>Completed</td>
            <td>28.04.2019</td>
            <td>1 day</td>
        </tr>
        <!-- Expected behaviour: Only show row below after initialization --> 
        <tr>
            <td>Training 2</td>
            <td>Planned</td>   
            <td>05.05.2019</td>
            <td>2 days</td>
        </tr>
                ...
    </tbody>
</table>

Answer 1

Вам необходимо установить свойство name с параметром columns или columnDefs.

Вот пример кода:

$(document).ready(function () {
  var table = $('#trainings-table').DataTable({
      dom: 't',
      columns: [
        {name: 'name'},
        {name: 'status'},
        {name: 'date'},
        {name: 'duration'}
      ],
      searchCols: [
        null, 
        {search: 'Planned'},
        null,
        null
      ]
    });
});

<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>

<table id="trainings-table">
    <thead>
        <tr>
            <th data-name="name">description</th>
            <th data-name="status">Status</th>
            <th data-name="date">date</th>
            <th date-name="duration">days</th>
        </tr>
    </thead>
    <tbody>
        <!-- Expected behaviour: This row below should be hidden after initialization --> 
        <tr>
            <td>Training 1</td>
            <td>Completed</td>
            <td>28.04.2019</td>
            <td>1 day</td>
        </tr>
        <!-- Expected behaviour: Only show row below after initialization --> 
        <tr>
            <td>Training 2</td>
            <td>Planned</td>   
            <td>05.05.2019</td>
            <td>2 days</td>
        </tr>
    </tbody>
</table>