Datatables clear input filters
<p>I am using datatables v1.10.11 and Jquery v 2.2.0</p>

<p>I have one table with two input search filters;</p>

<pre><code>&lt;input type="text" id="myInputTextField1" class="form-control"&gt; &lt;!--search one--&gt;

&lt;input type="text" id="myInputTextField2" class="form-control"&gt; &lt;!--search two--&gt;
</code></pre>

<p>My datatable JS;</p>

<pre><code>$(document).ready(function() {
    $('#example').dataTable({});
}); 

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

$('#myInputTextField2').keyup(function(){
  table.search($(this).val()).draw() ;
})
</code></pre>

<p>The search is working fine, no issues.</p>

<p>How would I incorporate a simple button that when clicked, will clear both input fields and reset the table to it's default state? For example;</p>

<pre><code>&lt;button type="button" id="test"&gt;Clear Filters&lt;/button&gt;

&lt;table id="example"&gt;
&lt;thead&gt;
  &lt;tr&gt;
    &lt;th&gt;COLUMN 1&lt;/th&gt;
    &lt;th&gt;COLUMN 2&lt;/th&gt;
    &lt;th&gt;COLUMN 3&lt;/th&gt;
  &lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
  &lt;tr&gt;
    &lt;td&gt;ROW 1&lt;/td&gt;
    &lt;td&gt;ROW 1&lt;/td&gt;
    &lt;td&gt;ROW 1&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;ROW 2&lt;/td&gt;
    &lt;td&gt;ROW 2&lt;/td&gt;
    &lt;td&gt;ROW 2&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;ROW 3&lt;/td&gt;
    &lt;td&gt;ROW 3&lt;/td&gt;
    &lt;td&gt;ROW 3&lt;/td&gt;
  &lt;/tr&gt;  
&lt;/tbody&gt;
&lt;/table&gt;
</code></pre>

<p>Any help is appreciated.</p>