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!!!