jQuery UI Slider
jQuery UI Slider
I'm trying to implement using a jQuery UI slider in 1.5 beta as a range filter.
Following the code here: (http://datatables.net/1.5-beta/examples/api/range_filtering.html -- note, found through Google, couldn't find a link on the site to reach this page!) I see that you use document.getElementById('min') to parse the value of the minimum input field. Well, this doesn't work so well with slider(), which uses $("#slider").slider('values', 0) to get the value of the minimum (assuming a slider with two handles).
Also, I tried to implement the slider's change callback to table.fnDraw(), which also didn't seem to work. Here's the relevant portions of code, edited for clarity:
[code]
$.fn.dataTableExt.afnFiltering.push(function(oSettings, aData, iDataIndex) {
return aData[3] < slider.slider('values', 0) || aData[3] > slider.slider('values', 1)
});
$(document).ready(function() {
var table = $('#table').dataTable();
var slider = $('#slider').slider({
min: 1960,
max: 2010,
range: true,
change: table.fnDraw()
});
});
[/code]
I think it may have to do with the filter trying to call slider before that var is initiated. Also, if I move the slider code above the dataTable code, that fails because of the change callback (table doesn't exist). Perhaps if I check for the existence of slider in the filter, that'd work, but it'd check that every time on table redraw, which seems inefficient. I'll have to play with it more.
Any thoughts?
Update:
Upon closer inspection, the var slider isn't available in the filter call, because it's declared within the $(document).ready() block. Switching code to this seems to be a closer solution, but still no dice:
[code]
$.fn.dataTableExt.afnFiltering.push(function(oSettings, aData, iDataIndex) {
if($("#slider").slider('values', 0) > 0) { // My use case starts at 1960, and a new slider object's min defaults to 0
return aData[3] < $("#slider").slider('values', 0) || aData[3] > $("#slider").slider('values', 1)
}
});
$(document).ready(function() {
var table = $('#table').dataTable();
var slider = $('#slider').slider({
min: 1960,
max: 2010,
range: true
});
slider.bind('slidechange', table.fnDraw());
});
[/code]
Note the bind() call, which may be preferred as a solution to this problem.
Following the code here: (http://datatables.net/1.5-beta/examples/api/range_filtering.html -- note, found through Google, couldn't find a link on the site to reach this page!) I see that you use document.getElementById('min') to parse the value of the minimum input field. Well, this doesn't work so well with slider(), which uses $("#slider").slider('values', 0) to get the value of the minimum (assuming a slider with two handles).
Also, I tried to implement the slider's change callback to table.fnDraw(), which also didn't seem to work. Here's the relevant portions of code, edited for clarity:
[code]
$.fn.dataTableExt.afnFiltering.push(function(oSettings, aData, iDataIndex) {
return aData[3] < slider.slider('values', 0) || aData[3] > slider.slider('values', 1)
});
$(document).ready(function() {
var table = $('#table').dataTable();
var slider = $('#slider').slider({
min: 1960,
max: 2010,
range: true,
change: table.fnDraw()
});
});
[/code]
I think it may have to do with the filter trying to call slider before that var is initiated. Also, if I move the slider code above the dataTable code, that fails because of the change callback (table doesn't exist). Perhaps if I check for the existence of slider in the filter, that'd work, but it'd check that every time on table redraw, which seems inefficient. I'll have to play with it more.
Any thoughts?
Update:
Upon closer inspection, the var slider isn't available in the filter call, because it's declared within the $(document).ready() block. Switching code to this seems to be a closer solution, but still no dice:
[code]
$.fn.dataTableExt.afnFiltering.push(function(oSettings, aData, iDataIndex) {
if($("#slider").slider('values', 0) > 0) { // My use case starts at 1960, and a new slider object's min defaults to 0
return aData[3] < $("#slider").slider('values', 0) || aData[3] > $("#slider").slider('values', 1)
}
});
$(document).ready(function() {
var table = $('#table').dataTable();
var slider = $('#slider').slider({
min: 1960,
max: 2010,
range: true
});
slider.bind('slidechange', table.fnDraw());
});
[/code]
Note the bind() call, which may be preferred as a solution to this problem.
This discussion has been closed.
Replies
Check this out, i hope it'll help you:
Project-Website: http://www.inmolia.com
Thanks for replying! Unfortunately, I was looking for a jQuery-only solution; one that doesn't require params being sent to the server to redraw the table.
After doing some custom filtering work (enabling OR-based searching for tables as the default), I've learned a lot about custom fnFiltering for DataTables, and I'm confident that with some more hacking, I could get this feature implemented. Once some other, more pressing features become enabled, I'll revisit this issue.
That site looks nice! (although I couldn't understand it :P )
You say '$("#slider").slider('values', 0)' doesn't work in place of document.getElementById('min') - why is this? As long as you can get the integer value of the minimum then it should work great (note I've not actually used jQuery UI's slider controls, so can't say exactly how they work...).
Regarding the code - could you have 'slider' as a global variable which resolve the scoping problem, and also perhaps a 'bInitialised' variable. This would be set to false initially and then true once the slider as initialised - then in the custom filtering function have it return true when 'bInitialised' is false, and return the result of your expression when true. Alternatively you could set up dummy methods to the slider variable which will return a default until override by the assignment of the jQuery UI control.
Finally (for now!) the link to the 1.5 example - there are a couple of references (where appropriate) to the 1.5 examples in these forums, but since 1.5 is beta software, they aren't fully advertised. Soon hopefully...
Regards,
Allan