jQuery DataTables 和 Columnfilterwidget 重置所有过滤器按钮 [英] jQuery DataTables and Columnfilterwidget Reset all filters button

问题描述

我是 JavaScript 新手.所以我的问题有点傻.

I am new to Javascript.So my question is a little silly.

我正在寻找 Columnfilterwidget 的重置所有过滤器按钮并找到此代码.

I was looking for Reset all filter button for Columnfilterwidget and found this code.

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

我需要将它绑定到一个按钮才能使其工作.

I need to bind it to a button to make it work.

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

});
});

但它不起作用，我点击按钮后得到的只是我的页面被刷新.我在这里做错了什么???

But it doesn't work, all i get on button click is my page get's refreshed. What i am doing wrong here???

更新

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

});
});

现在页面不刷新，代码也不行，控制台只显示直到我点击按钮后的按钮消息.

Now page is not refreshing, also code is not woking, The console only shows till afterbutton message i click on button.

这段代码有什么问题吗?

Is there anything wrong with this code?

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

Thank you so much for the reply, as per your suggestion i've updated my code(I took button click event outside the $(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({ 这是我初始化数据表的方式.

This still refreshes my page on button click, But if i take button click event inside $(document).ready(function() then i get error as table.fnResetAllFilters(); is not a function. table = $('#example').DataTable({ this is how i initialize the Datatable.

推荐答案

您需要将 preventDefault() 添加到原始按钮单击侦听器中，实际上您已经添加了另一个.

You need to add the preventDefault() to your original button click listener, you've actually added another one.

修改您的代码，使其看起来像这样:

Modify your code so it looks like this:

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

看起来您在按钮点击代码中也包含了函数定义.

It also looks like you've included the function definition inside your button click code.

它需要看起来更像这样:

It needs to look something more like this:

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

这篇关于jQuery DataTables 和 Columnfilterwidget 重置所有过滤器按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！