How to use Select box outside to filter dataTables?

Question

I'm using the DataTables Table plug-in for jQuery but I'm having trouble getting the global input search box would be an select box.

With the sDOM option lrtip, filtering input is not show but is it possible to display select box and getting the datatable to filter based on the change of the select box?

JS:

$(document).ready(function() {
    var table = $('#table_page').DataTable( {
        paging:   true,
        ordering: false,        
        info:     true,
        searching: true, 
        sDom: "lrtip" // default is lfrtip, where the f is the filter
    });
});

HTML:

<table id="table_page" class="display cell-border" width="100%">
    <thead>
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
        </tr>
    </thead>
</table>

Have you seen [Individual column searching (select inputs) example](https://datatables.net/examples/api/multi_filter_select.html)? — Gyrocode.com, Oct 26 '16 at 13:12
Yes, but I want global searching not Individual column searching. — LeMoussel, Oct 26 '16 at 13:17
Looks like your answer is here: http://stackoverflow.com/questions/12199759/datatables-custom-filtering — Deepak Rai, Oct 26 '16 at 13:18
No, it's a solution to programmatically filter a datatable using a custom filter function not to use select box as global search. — LeMoussel, Oct 26 '16 at 13:25

Gyrocode.com · Accepted Answer · 2016-10-26T14:22:44.087

29

You can use search() API method to perform global search programmatically and dom option to disable built-in search control.

For example:

var table = $('#example').DataTable({
   dom: 'lrtip'
});

$('#table-filter').on('change', function(){
   table.search(this.value).draw();   
});

See this example for code and demonstration. See this example, if you want to replace default search box.

edited Oct 26 '16 at 14:22

answered Oct 26 '16 at 13:29

Gyrocode.com

57,606
14
150
185

OK, but do you think is it possible to have select box in the same row as "Show entries" (like the input search box with sDom 'lfrtip' option) – LeMoussel Oct 26 '16 at 13:39
@ Gyrocode.com Wow ! update your answer so I accept it. Thanks for your help, cheers. – LeMoussel Oct 26 '16 at 14:11
@LeMoussel, updated the answer. Also there was a typo in the last example which is corrected, see https://jsfiddle.net/zmoos6tu/3 – Gyrocode.com Oct 26 '16 at 14:24

score 1 · Answer 2 · answered Jun 14 '21 at 15:19

There are two to search a string using your custom field as I created custom field Month's outside the DataTable scope and used below code to make it workable like search box.

1.First solution, once you click on drop down search box will filled with what you selected and populate the result but you can always see search box with selected value.

HTML:

<select name="month-select" id="month-select" class="monthlist" onclick="">
                <option value="">Month's</option>
                <option value="<?php echo date('Y');?>-01">Jan</option>
                <option value="<?php echo date('Y');?>-02">Feb</option>
                <option value="<?php echo date('Y');?>-03">Mar</option>
                <option value="<?php echo date('Y');?>-04">Apr</option>
                <option value="<?php echo date('Y');?>-05">May</option>
                <option value="<?php echo date('Y');?>-06">Jun</option>
                <option value="<?php echo date('Y');?>-07">Jul</option>
                <option value="<?php echo date('Y');?>-08">Aug</option>
                <option value="<?php echo date('Y');?>-09">Sep</option>
                <option value="<?php echo date('Y');?>-10">Oct</option>
                <option value="<?php echo date('Y');?>-11">Nov</option>
                <option value="<?php echo date('Y');?>-12">Dec</option>
                </select>

Javascript Code :

var selectedValue=$("#month-select").val();    
table.search(selectedValue).draw();

Second solution I like as it is not showing anything in datatable master search field and result comes without modifying search field
```
var selectedValue=$("#month-select").val();
 table.columns(6).search( selectedValue ).draw();
```

columns(6) you can modified this number 6 as per your column order.

How to use Select box outside to filter dataTables?

2 Answers2

Linked