使用JqueryUI滑塊來進行範圍過濾器數據表結果

我正在使用插件ColumnFilter來爲Datatables中的每列渲染過濾器。使用JqueryUI滑塊來進行範圍過濾器數據表結果

ColumnFilter呈現兩個輸入框（從&到）以執行表的「範圍」過濾。

我想用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); 
}); 


});

這工作得很好，我可以看到的值在兩個輸入框的變化而變化當我移動滑塊。

但是，當我交換由ColumnFilter插件呈現的兩個輸入框的輸入＃Min和inut＃Max元素時。似乎沒有發生。在輸入框中看不到任何值更新，並且表不會按預期自動排序。

也許我正在接近這個錯誤的方式嗎？有沒有其他方法可以使用Datatables和Columnfilter插件創建滑塊？

非常感謝！

來源

2011-09-29 gordyr

用於過濾的兩個輸入框正在'偵聽'以便更改事件，但通過UI滑塊更新值不會觸發此操作。

我有一個類似的問題，並最終迫使只是因爲對動態內容的sliderstop（通過鼠標鬆開滑塊觸發的事件）change()被加載上，我不想在幻燈片變化而變化，但你可以強制更改（）也在幻燈片上。

嘗試：

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

後val();

更新的值應該工作:)

來源

2011-10-30 12:49:46 Umut

我居然就columnfilter插件放棄了，用我自己定製的解決方案去了，但是你的解決方案還作品，謝謝！ – gordyr

使用JqueryUI滑塊來進行範圍過濾器數據表結果

回答

相關問題