数据表和jQuery范围滑块来过滤数据

Question

我正在使用jquery数据表和一个jqueryui范围滑块。

Datatables内置范围过滤器，但使用输入框输入范围。我想用滑块代替。请有人帮助我修改下面的代码，以使用滑块。

当前的代码是：

<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/

感谢

Answer 1

第一件事你的范围过滤器必须具有滑块的值作为iMin e iMax，所以我认为你应该这样做（确保你在正确的列上过滤数据UMN：在这个例子中ADATA [3]滤波器上的4个列）：

$.fn.dataTableExt.afnFiltering.push(
function(oSettings, aData, iDataIndex) { 
//min value 
var iMin = $slider.slider("values", 0) 
//max value 
var iMax = $slider.slider("values", 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; 
} 
); 

他们当滑块停止必须重绘tablke：

stop: function(event, ui){//This event is triggered when the user stops sliding. 
      oTable.fnDraw(); 
    } 

我没有测试它当然，让我知道你得到了什么