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

Question

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>

you should add all your html/js to question

Hien Nguyen
– Hien Nguyen

2019-05-05 14:42:04 +00:00
Commented May 5, 2019 at 14:42 — Hien Nguyen
– Hien Nguyen, Commented May 5, 2019 at 14:42

Yevhen Horbunkov · Accepted Answer · 2019-05-06 09:58:34Z

2

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>

edited May 6, 2019 at 9:58

Yevhen Horbunkov

15.6k3 gold badges27 silver badges46 bronze badges

answered May 5, 2019 at 16:13

Thxopen

1987 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Yevhen Horbunkov Over a year ago

There's no point to copypaste datatables.net example when you can use actual OP's data. You can make columns option appear more compact with something, like: columns: ['name', 'status', 'date', 'duration'].map(header => ({name: header}))

Thxopen Over a year ago

@fydelio columns doesn't have search property. maybe you need searchCols - Define an initial search for individual columns datatables.net/reference/option/searchCols

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related