CODEWITHSUNDEEP
javascriptsearchfilterdatatables
Jim
Jim

Reputation: 35

DataTables - Advanced Search / Column filters?

Im new to webdev languages in general so please bare with me.
I'd like to implement search filters (dropdown) to my DataTable

The problem here is, when i select "All" from "Jobs" it won't reset back to defaults,
so how i do this with Javascript?

codepen.io

Also is there a better way to do this?
(Please post your example with the correct code snippet)

    
    function filterColumn ( i ) {
    $('#ex').DataTable().column( i ).search(
    $('#col'+i+'_filter').val()
    ).draw();
    }
    
    
    $(document).ready(function() {
        $('#ex').DataTable();
        
     
    
    $('input.column_filter').on( 'keyup click', function () {
    filterColumn( $(this).parents('div').attr('data-column') );
        } );
    } );
    


        $('select.column_filter').on('change', function () {
            filterColumn( $(this).parents('div').attr('data-column') );
        } );
body {
    font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
    color: #333;
    background-color: #fff;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">        
<div class="card">
<div class="card-body">
<form id="clear">
<div class="row">


<!--------------------------Name-------------------------->
<div class="col-md-2 pl-1">
<div class="form-group" id="filter_col0" data-column="0">
<label>Name</label>
<input type="text" name="Name" class="form-control column_filter" id="col0_filter" placeholder="Name">
</div>
</div>



                  
<!--------------------------Job-------------------------->
<div class="col-md-2 pl-1">
<div class="form-group" id="filter_col1" data-column="1">
<label>Job</label>
<select name="JobID" class="form-control column_filter" id="col1_filter">
<option>All</option>
<option>student</option>
<option>teacher</option>
<option>drive</option>
</select>
</div>
</div>
</div>


       

<!---------------------------------------------------------------------------------------------------->
<div class="card row">
<div class="col-lg-12">
<br>

<header>
<div class="table-responsive">
<table id="ex" class="table table-striped table-bordered">
<thead>
<tr>
<th>Name</th>
<th>Job</th>
<th>Age</th>
<th>date</th>
</tr>
</thead>
<tbody>
<tr>
<th>John Doe</th>
<th>student</th>
<th>25</th>
<th>10/31/2018</th>
</tr>
<tr>
<th>George Clooney</th>
<th>teacher</th>
<th>33</th>
<th>05/22/2018</th>
</tr>
<tr>
<th>David Trump</th>
<th>drive</th>
<th>25</th>
<th>07/13/2018</th>
</tr>
</tbody>
</table>
</div>
</header>
</div>
</div>


<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>
<script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>

Upvotes: 1

Views: 1399

Answers (1)

andrewJames
andrewJames

Reputation: 21911

You can make a small change to your <option> elements to fix this. Make sure they all use value attributes - for example:

<select name="JobID" class="form-control column_filter" id="col1_filter">
    <option value="">All</option>
    <option value="student">student</option>
    <option value="teacher">teacher</option>
    <option value="drive">drive</option>
</select>

Specifically, make sure the "All" option has an empty string as its option value:

<option value="">All</option>

All the other values should match the value you want to filter on.

Without the value attributes, DataTables will use the display value for filtering - so, the "All" option will try to find column fields containing the string "all".

$('#col'+i+'_filter').val()

When you use the option attribute you can override this with an empty string - which means all records will be unfiltered for this column.

That is the only change I made to your codepen. If that is not clear I can provide the full update - but I think that should not be needed here.

Upvotes: 2

Related Questions