數據表明確輸入濾波器

Question

我使用的數據表v1.10.11和jQuery 2.2.0 v

我有兩個輸入搜索過濾器一個表;

<input type="text" id="myInputTextField1" class="form-control"> <!--search one--> 

<input type="text" id="myInputTextField2" class="form-control"> <!--search two--> 

我的數據表JS;

$(document).ready(function() { 
    $('#example').dataTable({}); 
}); 

$('#myInputTextField1').keyup(function(){ 
    table.search($(this).val()).draw() ; 
}) 

$('#myInputTextField2').keyup(function(){ 
    table.search($(this).val()).draw() ; 
}) 

搜索工作正常，沒有問題。

我該如何合併一個簡單的按鈕，單擊時，將清除兩個輸入字段並將表重置爲默認狀態？例如;

<button type="button" id="test">Clear Filters</button> 

<table id="example"> 
<thead> 
    <tr> 
    <th>COLUMN 1</th> 
    <th>COLUMN 2</th> 
    <th>COLUMN 3</th> 
    </tr> 
</thead> 
<tbody> 
    <tr> 
    <td>ROW 1</td> 
    <td>ROW 1</td> 
    <td>ROW 1</td> 
    </tr> 
    <tr> 
    <td>ROW 2</td> 
    <td>ROW 2</td> 
    <td>ROW 2</td> 
    </tr> 
    <tr> 
    <td>ROW 3</td> 
    <td>ROW 3</td> 
    <td>ROW 3</td> 
    </tr> 
</tbody> 
</table> 

任何幫助表示讚賞。

Answer 1

要重置搜索過濾器，只需再次使用空字符串進行搜索。同樣，您可以通過將其值設置爲空字符串來清除輸入值。試試這個：

$('#test').click(function() { 
    $('#myInputTextField1, #myInputTextField2').val(''); 
    table.search('').draw(); //required after 
}); 

Working example