數據表和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(); 
    } 

我沒有測試它當然，讓我知道你得到了什麼