Question

我使用ColumnFilter插件为Datatables中的每一列呈现过滤器。

ColumnFilter渲染两个输入框（From＆amp; To），以便对表执行'范围'过滤。

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

我已设法将滑块控制两个独立的'从'＆amp; '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插件呈现的两个输入框时。似乎什么也没发生。我无法在输入框中看到任何值更新，并且表格未按预期自动排序。

也许我接近这个错误的方式？有没有其他方法可以使滑块与Datatables和Columnfilter插件一起使用？

非常感谢！

Answer 1

用于过滤的两个输入框正在“收听”更改事件，但通过UI滑块更新值不会触发此操作。

我遇到了类似的问题，结果只是强迫change() sliderstop（由鼠标上的滑块触发的事件），因为动态内容被加载在更改上，我不想在幻灯片上更改，但你也可以在幻灯片上强制改变（）。

尝试：

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

用val();

更新值后

应该工作：）

使用JqueryUI滑块来范围过滤Datatable结果

1 个答案: