jQuery DataTables和Columnfilterwidget重置所有過濾器按鈕

Question

我是Java語言的新手，所以我的問題有點傻。

我一直在尋找Columnfilterwidget的Reset all 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({這就是我初始化數據表的方式。

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();
  });
});