使用JqueryUI滑块对Datatable结果进行范围过滤

Question

我正在使用插件ColumnFilter为datatable中的每个列呈现过滤器。

ColumnFilter呈现两个输入框(From &To)，以便对表执行'range'过滤。

我试图用jqueryUI滑块替换这些输入框，但似乎无法使其工作。

我已经设法使滑块控件两个独立的'from' &'too'输入的代码如下:

//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);
});

});

这个工作得很好，我可以看到两个输入框中的值随着我移动滑块而变化。

然而，当我交换输入#Min和inut#Max元素为ColumnFilter插件呈现的两个输入框。似乎什么也没发生。我在输入框中看不到任何值更新，并且表没有按预期自动排序。

也许我的方式是错误的?还有其他方法使滑块与数据表和Columnfilter插件一起工作吗?

多谢!

Answer 1

用于过滤的两个输入框正在被'监听'更改事件，但通过UI滑块更新值不会触发此事件。

我有一个类似的问题，最终只是强迫change()对sliderstop(事件触发滑块在鼠标向上)，因为动态内容被加载的变化，我不想在幻灯片上改变，但你可以强迫改变()在幻灯片上。

试题:

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

用val();

更新后的值

应该工作:)