DataTable with jQuery UI range slider... close but not working...

rolfsf

So far, DataTables seems to do anything I want it to (within reason, of course) - it's fantastic Allan!

Today, I'm trying to hook up a jQuery UI range slider to a simple datatable using the number range filter extension:
http://datatables.net/plug-ins/filtering#range_numbers

I've read through numerous posts in the discussion forum on similar topics, but I can't find any clue as to why my datatable is not recognizing the slider and the filter plugin.

I've extracted the basics from my app into a jsbin to assist: http://jsfiddle.net/rolfsf/5edCc/

here is the stripped down code:

[code]
var data = [
[1000000, "Company A"],
[62000000, "Company B"],
[60000000, "Company C"],
[80000000, "Company D"],
[76000000, "Company E"],
[64000000, "Company F"],
[70000000, "Company G"],
[75000000, "Company H"],
[78000000, "Company I"],
[60000000, "Company J"],
[66000000, "Company K"],
[20000000, "Company L"],
[6000000, "Company M"],
[11000000, "Company N"],
[5000000, "Company O"],
[160000000, "Company P"],
[15000000, "Company Q"]
];

$.fn.dataTableExt.afnFiltering.push(
function( oSettings, aData, iDataIndex ) {
var iColumn = 0;
var iMin = rangeSlider.slider(values, 0);
var iMax = rangeSlider.slider(values, 1);

var iVersion = aData[iColumn] == "-" ? 0 : aData[iColumn]*1;
alert(aData[iColumn]);
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;
}
);

var rangeSlider = $( "#slider-range" )

var initRangeSlider = function(){
rangeSlider.slider({
range: true,
min: 1000000,
max: 150000000,
step: 1000000,
values: [ 65000000, 85000000 ],
slide: function( event, ui ) {
$('#range-bottom').text(ui.values[ 0 ]);
$('#range-top').text(ui.values[ 1 ]);
},
stop: function(event, ui) {
alert(ui.values[ 0 ] + " - " + ui.values[ 1 ]);
oTable.fnDraw();
}
});

var rangeBottom = rangeSlider.slider("values", 0);
var rangeTop = rangeSlider.slider("values", 1);

$('#range-bottom').text(rangeBottom);
$('#range-top').text(rangeTop);

}

$(document).ready( function() {

var oTable = $('#example').dataTable({
"aaData": data,
"bDestroy": true,
"aaSorting": [[0, 'asc']],
"sScrollY": '300px',
"bPaginate": false,
"bInfo": false,
"bFilter": false,
"bScrollCollapse": true,
"fnInitComplete": function() {
this.fnAdjustColumnSizing(true);
}
});

initRangeSlider();

});

[/code]

Thanks for any help or tips anyone can offer!


UPDATE: working now : http://jsfiddle.net/rolfsf/5edCc/1/

what was wrong?
bFilter: false ---> true
missing quotes on "values" in the filter plugin
init the range slider before building the table

kryzler

Can u instead of specifying the data call it from a data table if so how would i go about.
PS: im using wordpress

ellipsis

Compliments

allan

@rolfsf - sorry for the long delay!

> So far, DataTables seems to do anything I want it to (within reason, of course) - it's fantastic Allan!

lol - thanks! I'm still waiting for it to me mean some coffee...

Goot to hear that you got this working :-)

If you want to keep filtering on but remove the global filtering input box, use the sDom parameter and drop the `f` option.

Allan

rolfsf

Thanks @allan - I recently discovered sDom and have been having fun with it! If you're ever in San Francisco - the coffee is on me.

@kryzler The range slider doesn't have a datasource, really - you give it a range and a step (increment).

The datatable itself can be generated from a table, as Allan demonstrates throughout this site. So, you can pretty much just delete the "aaData": data, from the above code, I think.