DataTable with jQuery UI range slider... close but not working...
DataTable with jQuery UI range slider... close but not working...
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
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
This discussion has been closed.
Replies
PS: im using wordpress
> 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
@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.