DataTables - 高级搜索/列过滤器？

Question

一般来说，我是 webdev 语言的新手，所以请与我交流。
我想在我的 DataTable 中实现搜索过滤器（下拉菜单）

这里的问题是，当我从“工作”中选择“全部”时，它不会重置为默认值，
那么我如何用 Javascript 做到这一点？

codepen.io

还有更好的方法吗？
（请使用正确的代码 sn-p 发布您的示例）

    
    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>

Answer 1

您可以对您的 <option> 元素进行小幅更改来解决此问题。确保它们都使用value 属性 - 例如：

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

具体来说，确保“All”选项有一个空字符串作为其选项值：

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

所有其他值都应与您要过滤的值相匹配。

如果没有value 属性，DataTables 将使用显示值进行过滤 - 因此，“All”选项将尝试查找包含字符串“all”的列字段。

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

当您使用 option 属性时，您可以用空字符串覆盖它 - 这意味着该列的所有记录都不会被过滤。

这是我对您的 codepen 所做的唯一更改。如果不清楚，我可以提供完整的更新 - 但我认为这里不需要。