CODEWITHSUNDEEP
javascriptjquerydatatables
fydelio
fydelio

Reputation: 963

jQuery DataTables: Set a search filter for a named column upon initialization

Basically, I want to achieve this command upon initialization of my dataTables.

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

So, what I've tried:

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

But this didn't work. I also tried changing the target to the exact column number (e.g. targets: 2) and not using this named target, but that didn't seem to be the problem.

My DataTable:

<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>

Upvotes: 0

Views: 1048

Answers (1)

Thxopen
Thxopen

Reputation: 188

You need to set name property with columns or columnDefs option.

Here is the code example:

$(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>

Upvotes: 2

Related Questions