数据表和jquery范围滑块可过滤数据
|
我正在使用jquery数据表和jqueryui范围滑块。
数据表内置了一个范围过滤器,但是使用输入框输入范围。我想改用滑块。请有人帮我修改下面的代码,以使用滑块。
当前代码是:
<script type=\"text/javascript\" charset=\"utf-8\">
/* Custom filtering function which will filter data in column four between two values */
$.fn.dataTableExt.afnFiltering.push(
function( oSettings, aData, iDataIndex ) {
var iMin = document.getElementById(\'min\').value * 1;
var iMax = document.getElementById(\'max\').value * 1;
var iVersion = aData[3] == \"-\" ? 0 : aData[3]*1;
if ( iMin == \"\" && iMax == \"\" )
{
return true;
}
else if ( iMin == \"\" && iVersion <= iMax )
{
return true;
}
else if ( iMin <= iVersion && \"\" == iMax )
{
return true;
}
else if ( iMin <= iVersion && iVersion <= iMax )
{
return true;
}
return false;
}
);
$(document).ready(function() {
/* Initialise datatables */
var oTable = $(\'#example\').dataTable();
/* Add event listeners to the two range filtering inputs */
$(\'#min\').keyup( function() { oTable.fnDraw(); } );
$(\'#max\').keyup( function() { oTable.fnDraw(); } );
} );
</script>
<script type=\"text/javascript\">
$(function() {
$slider = $(\"#slider\");//Caching slider object
$amount = $(\"#amount\");//Caching amount object
$slider.slider({
range: true, // necessary for creating a range slider
min: 0, // minimum range of slider
max: 50, //maximimum range of slider
values: [0, 50], //initial range of slider
step: 0.2,
slide: function(event, ui) { // This event is triggered on every mouse move during slide.
$amount.html(\'$\' + ui.values[0] + \' - $\' + ui.values[1]);//set value of amount span to current slider values
},
stop: function(event, ui){//This event is triggered when the user stops sliding.
//alert($slider.slider(\"values\", 0));
}
});
$amount.html(\'$\' + $slider.slider(\"values\", 0) + \' - $\' + $slider.slider(\"values\", 1));
});
</script>
我无法在此处显示易于阅读的代码,因此也将其添加到了jsfiddle中:
http://jsfiddle.net/ny32j/
谢谢
没有找到相关结果
已邀请:
1 个回复
赣借
它们,您必须在滑块停止时重新绘制Tablke:
我当然没有测试过,让我知道你得到了什么