数据表和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/ 谢谢     

解决方法

        首先，范围过滤器的滑块值必须为iMin e iMax，所以我认为您应该这样做（确保在正确的列上过滤数据：在此示例中，第4列上的aData [3]过滤器）：

$.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();
    }

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