jQuery DataTables和Columnfilterwidget重置所有筛选器按钮

jQuery DataTables and Columnfilterwidget Reset all filters button

本文关键字：筛选 按钮 DataTables Columnfilterwidget jQuery      更新时间：2023-09-26

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

我正在为Columnfilterwidget寻找重置所有过滤器按钮，并找到了这段代码。

$.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 = $('#example').DataTable({这就是我初始化数据表的方式。

您需要将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();
  });
});
相关文章：