Reset link for Datatables and ColumnFilterWidgets doesn't repopulate select

Viewed 235

When I click the reset link, the table refreshes, but it fails to refresh the <select> option list. (It doesn't put the <option> back into the <select> element.) Also, when I click on a new select option after hitting refresh, it displays the table as if I have two select options active instead of just one selection. (The previous select table entries are shown with the second select table entries.)

Here are some similar threads I have tried to learn from with the same problem:

jQuery DataTables and Columnfilterwidget Reset all filters button https://github.com/cyberhobo/ColumnFilterWidgets/issues/33

ColumnFilterWidgets Code: https://github.com/cyberhobo/ColumnFilterWidgets/blob/master/media/js/ColumnFilterWidgets.js DataTables Code: https://cdn.datatables.net/1.10.16/js/jquery.dataTables.js

My JSFiddle: https://jsfiddle.net/suzyweb/9qzy0sb2/19/

var oTable = $('#example').DataTable({
    ajax: "https://api.myjson.com/bins/esbxz",
    "sDom": 'W<"clear"><"toolbar">frtipl',
    "oColumnFilterWidgets": {
      "aiExclude": [0, 4, 5]
    },
  });

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

  $("div.toolbar").html('<a href="#" class="reset"><b>RESET</b></a>');

  $(".reset").click(function(e) {
    e.preventDefault();
    //alert("You clicked refresh");
    //oTable.fnFilterClear();
    $('#example').dataTable().fnResetAllFilters();
    // oTable.search("").draw();
  })

});

I'm very new to Javascript and feel really lost with trying to fix this one! I have spent so many days trying to understand this and it looks like others have been in the same boat, but I don't see how to do it. Thanks so much for any help you can offer!!!

1 Answers

I sought some expert help from ruslancer and he is allowing me to post the fixed code here. Thanks to all others who looked into this problem for me!

$.fn.dataTableExt.oApi.fnResetAllFilters = function(oSettings, bDraw /*/default true/*/ ) {
                var t = $("a.filter-term");
                for (var i=0; i<t.length; i++) {
                    $(t[i]).click();
                }

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