使用JqueryUI滑块来范围过滤数据表结果 [英] Using JqueryUI slider to range filter Datatable results

问题描述

我使用插件 ColumnFilter 来为中的每一列提供过滤器。

ColumnFilter呈现两个输入框（From&To），以便执行表格的范围过滤。

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

我设法使一个滑块控制两个单独的from& 'too'input with the following code：

  //幻灯片
 
 $（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：'horizo​​ntal'，
 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（）函数（）{
 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（），
h igh = $ upper.val（）; 
 high = Math.max（low，high）; 
 $ upper.val（高）; 
 $ slider.slider（'values'，1，high）; 
}）; 
 
 
}）; 
  

这工作正常，我可以看到两个输入框中的值更改随着我移动滑块。

但是，当我交换由ColumnFilter插件呈现的两个输入框的输入＃Min和inut＃Max元素时。似乎没有发生。我在输入框中看不到任何值更新，表不会按预期自动排序。

也许我正在接近这个错误的方式？有没有其他的方法来使用Datatables和Columnfilter插件的滑块工作？

非常感谢！

解决方案

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

我有类似的问题，最后只是在上加上 change（） sliderstop （由mouseup上的滑块触发的事件），因为动态内容正在加载，我不想在幻灯片上进行更改，但是您也可以在幻灯片上强制更改（）。
$ b

尝试：

  $ lower.change（）; 
 $ upper.change（）; 
  

用 val（）;

应该工作：）

I am using the plugin the ColumnFilter to render filters for each column in Datatables.

ColumnFilter renders two input boxes (From & To) in order to perform 'range' filtering of a table.

I am trying to replace these input boxes with a jqueryUI slider but cannot seem to make it work.

I have managed to make a slider control two separate 'from' & 'too' inputs with the following code:

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


});

This works fine and I can see the values change in the two input boxes change as I move the slider.

However, when I swap the input#Min and inut#Max element for the the two input boxes that are rendered by the ColumnFilter plugin. Nothing seems to happen. I cannot see any values update in the input boxes and the table does not auto sort as expected.

Perhaps I am approaching this the wrong way? Is there any other way to make a slider work with Datatables and the Columnfilter plugin?

Many thanks!

解决方案

The two input boxes used for filtering are being 'listened to' for change event but updating the values via UI sliders does not trigger this.

I had a similar problem and ended up just forcing change() on sliderstop (event triggered by slider on mouseup) because of the dynamic content being loaded on change which I didn't want changing on slide, but you could force change() on slide too.

try:

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

after updating the values with val();

Should work :)

这篇关于使用JqueryUI滑块来范围过滤数据表结果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！