Использование ползунка JqueryUI для ранжирования результатов поиска по данным

Question

Я использую плагин ColumnFilter для отображения фильтров для каждого столбца в Datatables .

ColumnFilter отображает два поля ввода (From & To), чтобы выполнить фильтрацию таблицы по диапазону.

Я пытаюсь заменить эти поля ввода ползунком jqueryUI, но не могу заставить его работать.

Мне удалось настроить ползунок для управления двумя отдельными входами «от» и «тоже» со следующим кодом:

//SLIDER

$(function() {
    var $slider = $('#Slider'),
    $lower = $('input#Min'),
    $upper = $('input#Max'),
    min_rent = 0,
    max_rent = 400;

$lower.val(min_rent);
$upper.val(max_rent);

$('#Slider').slider({
    orientation: 'horizontal',
    range: true,
    animate: 200,
    min: 0,
    max: 400,
    step: 1,
    value: 0,
    values: [min_rent, max_rent],
    slide: function(event,ui) {
        $lower.val(ui.values[0]);
        $upper.val(ui.values[1]);
    }
});

$lower.change(function () {
    var low = $lower.val(),
        high = $upper.val();
    low = Math.min(low, high);
    $lower.val(low);
    $slider.slider('values', 0, low);
});

$upper.change(function () {
    var low = $lower.val(),
high = $upper.val();
    high = Math.max(low, high);
    $upper.val(high);
    $slider.slider('values', 1, high);
});


});

Это работает нормально, и я вижу изменение значений в двух полях ввода при перемещении ползунка.

Однако, когда я меняю элемент input # Min и inut # Max для двух полей ввода, которые отображаются плагином ColumnFilter. Кажется, ничего не происходит. Я не вижу обновлений значений в полях ввода, и таблица не сортируется автоматически, как ожидалось.

Возможно, я подхожу к этому неправильно? Есть ли другой способ заставить слайдер работать с Datatables и плагином Columnfilter?

Большое спасибо!

Answer 1

Два поля ввода, используемые для фильтрации, прослушиваются для события изменения, но обновление значений с помощью ползунков пользовательского интерфейса не вызывает этого.

У меня была похожая проблема, и я просто принудил change() к sliderstop (событие, вызванное ползунком при наведении мыши) из-за динамического содержимого, загружаемого при изменении, которое я не хотел менять на слайде, но вы могли принудительное изменение () на слайде тоже.

попробовать:

$lower.change();
$upper.change();

после обновления значений с val();

Должен работать:)