Datatables и ползунок диапазона jquery для фильтрации данных

Question

Я использую таблицы данных 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/

Спасибо

Answer 1

Во-первых, ваш фильтр диапазона должен иметь значение ползунка как iMin e iMax, поэтому я думаю, что вам следует это сделать (убедитесь, что вы фильтруете данные в правильном столбце: в этом примере фильтры 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();
    }

я не проверял это, конечно, дайте мне знать, что вы получаете