Таблицы данных jQuery и виджет Columnfilterwidget Кнопка сброса всех фильтров ⇐ Jquery

[Anonymous]

Я новичок в Javascript. Поэтому мой вопрос немного глупый.

Я искал кнопку «Сбросить все фильтры» для виджета Columnfilter и нашел этот код.

Код: Выделить всё

$.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({ вот как я инициализирую таблицу данных.

Подробнее здесь: https://stackoverflow.com/questions/240 ... ers-button