jQuery DataTables和Columnfilterwidget重置所有filter按钮

我是Javascript的新手。所以我的问题有点傻。

我正在寻找Columnfilterwidget的重置所有filter按钮，并找到了这段代码。

$.fn.dataTableExt.oApi.fnResetAllFilters = function (oSettings, bDraw/default true/) { for(iCol = 0; iCol < oSettings.aoPreSearchCols.length; iCol++) { oSettings.aoPreSearchCols[ iCol ].sSearch = ''; } $('.filter-term').remove(); oSettings.oPreviousSearch.sSearch = ''; if(typeof bDraw === 'undefined') bDraw = true; if(bDraw) this.fnDraw(); } 

我需要将它绑定到一个按钮，使其工作。

 $(document).ready(function(){ $("button").click(function(){ $.fn.dataTableExt.oApi.fnResetAllFilters = function (oSettings, bDraw/default true/) { for(iCol = 0; iCol < oSettings.aoPreSearchCols.length; iCol++) { oSettings.aoPreSearchCols[ iCol ].sSearch = ''; } $('.filter-term').remove(); oSettings.oPreviousSearch.sSearch = ''; if(typeof bDraw === 'undefined') bDraw = true; if(bDraw) this.fnDraw(); } }); }); 

但它不起作用，所有我点击按钮是我的页面获得刷新。 我在这做错了什么???

更新

 $(document).ready(function(){ $("button").click(function(e){e.preventDefault();}) $("button").click(function(){ console.log("afterbutton"); $.fn.dataTableExt.oApi.fnResetAllFilters = function (oSettings, bDraw) { console.log("insidefunction"); for(iCol = 0; iCol < oSettings.aoPreSearchCols.length; iCol++) { oSettings.aoPreSearchCols[ iCol ].sSearch = ''; } $('.filter-term').remove(); oSettings.oPreviousSearch.sSearch = ''; if(typeof bDraw === 'undefined') bDraw = true; if(bDraw) this.fnDraw(); } }); }); 

现在页面没有刷新，代码也没有工作，控制台只显示直到按钮消息后我点击按钮。

这段代码有什么问题吗？

非常感谢您的回复，根据您的建议，我已经更新了我的代码（我在$(document).ready(function() ）之外点击了按钮点击事件

 $(document).ready(function(){ $.fn.dataTableExt.oApi.fnResetAllFilters = function (oSettings, bDraw) { for(iCol = 0; iCol < oSettings.aoPreSearchCols.length; iCol++) { oSettings.aoPreSearchCols[ iCol ].sSearch = ''; } $('.filter-term').remove(); oSettings.oPreviousSearch.sSearch = ''; if(typeof bDraw === 'undefined') bDraw = true; if(bDraw) this.fnDraw(); } } ); // button click event $("button").click(function(e){ e.preventDefault(); // 'myDataTable' is the name you gave the datatable at initialisation - oTable or similar table.fnResetAllFilters(); }); 

这仍然按下按钮点击我的页面，但如果我在$(document).ready(function()内部按钮点击事件然后我得到错误，因为table.fnResetAllFilters();不是一个函数table.fnResetAllFilters(); table = $('#example').DataTable({这是我初始化Datatable的方法。

Answer 1

您需要将preventDefault（）添加到原始按钮单击侦听器，您实际上已添加了另一个。

修改您的代码，使其如下所示：

 $(document).ready(function(){ $("button").click(function(e){ e.preventDefault(); console.log("afterbutton"); ... 

看起来你已经在按钮点击代码中包含了函数定义。

它需要看起来像这样：

 $(document).ready(function(){ // function definition $.fn.dataTableExt.oApi.fnResetAllFilters = function (oSettings, bDraw/default true/) { for(iCol = 0; iCol < oSettings.aoPreSearchCols.length; iCol++) { oSettings.aoPreSearchCols[ iCol ].sSearch = ''; } $('.filter-term').remove(); oSettings.oPreviousSearch.sSearch = ''; if(typeof bDraw === 'undefined') bDraw = true; if(bDraw) this.fnDraw(); } }); // button click event $("button").click(function(e){ e.preventDefault(); // 'myDataTable' is the name you gave the datatable at initialisation - oTable or similar myDataTable.fnResetAllFilters(); }); });