我正在使用datatables v1.10.11和Jquery v 2.2.0
我有一个包含两个输入搜索过滤器的表格;
<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>
感谢任何帮助。
答案 0 :(得分:3)
要重置搜索过滤器,只需使用空字符串再次调用BorderLayout
即可。类似地,您可以通过将其值设置为空字符串来清除输入的值。试试这个:
frame.add(button, BorderLayout.LINE_START);
答案 1 :(得分:0)
<button type="button" id="test" class="btn btn-primary">Clear Filters</button>
$('#test').click(function () {
$('input:text').val('');
var datatableVariable = $('#tblBusinessDev').dataTable();
datatableVariable.fnFilterClear();
$('#tblBusinessDev tfoot input').val('').change();
});
//filter code
jQuery.fn.dataTableExt.oApi.fnFilterClear = function (oSettings) {
var i, iLen;
/* Remove global filter */
oSettings.oPreviousSearch.sSearch = "";
/* Remove the text of the global filter in the input boxes */
if (typeof oSettings.aanFeatures.f != 'undefined') {
var n = oSettings.aanFeatures.f;
for (i = 0, iLen = n.length ; i < iLen ; i++) {
$('input', n[i]).val('');
}
}
/* Remove the search text for the column filters - NOTE - if you have input boxes for these
* filters, these will need to be reset
*/
for (i = 0, iLen = oSettings.aoPreSearchCols.length ; i < iLen ; i++) {
oSettings.aoPreSearchCols[i].sSearch = "";
}
/* Redraw */
oSettings.oApi._fnReDraw(oSettings);
};