Jquery ui 使用JqueryUI滑块对数据表结果进行范围筛选
我正在使用插件为中的每个列呈现过滤器 ColumnFilter呈现两个输入框(从和到),以便对表执行“范围”筛选 我试图用jqueryUI滑块替换这些输入框,但似乎无法使其正常工作 我用以下代码制作了一个滑块控制两个独立的“from”和“too”输入:Jquery ui 使用JqueryUI滑块对数据表结果进行范围筛选,jquery-ui,filter,datatables,Jquery Ui,Filter,Datatables,我正在使用插件为中的每个列呈现过滤器 ColumnFilter呈现两个输入框(从和到),以便对表执行“范围”筛选 我试图用jqueryUI滑块替换这些输入框,但似乎无法使其正常工作 我用以下代码制作了一个滑块控制两个独立的“from”和“too”输入: //SLIDER $(function() { var $slider = $('#Slider'), $lower = $('input#Min'), $upper = $('input#Max'), min_
//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插件一起工作
非常感谢 用于过滤的两个输入框正在“监听”更改事件,但通过UI滑块更新值不会触发此操作 我遇到了一个类似的问题,结果只是在
sliderstop
(由鼠标上的滑块触发的事件)上强制执行change()
,因为动态内容加载在change上,我不想在幻灯片上更改,但您也可以在幻灯片上强制更改()
尝试:
使用val()更新值后代码>
应该有效:)我实际上放弃了columnfilter插件,使用了我自己的自定义解决方案,但是你的解决方案也有效,谢谢!
$lower.change();
$upper.change();