Dropdown Filter
Dropdown Filter
I've had a flick back through the forums on posted relating to Dropdown filtering but I still can't seem to get things working.
I have a table with a column that has 4 possible values (1, 2, 3 and 4) and I'd like to put a dropdown box at the top containing "all, 1, 2, 3, 4" which I could use to filter the results. My setup is currently as follows...
[code]
$(document).ready(function(){
$('#example').dataTable({
"bStateSave": true,
"aoColumns": [
{"bSortable": false},
null,
null,
null,
null,
{"bSortable": false},
{"bSortable": false},
{"bSortable": false},
null,
{"bSortable": false}
]
});
});
[/code]
I have a table with a column that has 4 possible values (1, 2, 3 and 4) and I'd like to put a dropdown box at the top containing "all, 1, 2, 3, 4" which I could use to filter the results. My setup is currently as follows...
[code]
$(document).ready(function(){
$('#example').dataTable({
"bStateSave": true,
"aoColumns": [
{"bSortable": false},
null,
null,
null,
null,
{"bSortable": false},
{"bSortable": false},
{"bSortable": false},
null,
{"bSortable": false}
]
});
});
[/code]
This discussion has been closed.
Replies
Could you post your event handler where you are calling fnFilter() as well please? That would help to track down the problem.
Regards,
Allan
Thanks for getting back to me. I've been looking at this (http://datatables.net/forums/comments.php?DiscussionID=466) thread to try and help me work things out but haven't had any luck. I'm guessing i'd be looking at something like this...
[code]
$(document).ready(function() {
$('#table_containing_my_data').dataTable();
} );
$("select#form_for_my_data").change(function () {
var val = $("select#form_for_my_data option:selected").attr('value');
var regex = (val == "" ? "": "^"+val+"$");
oTable.fnFilter (regex,0,false);
});
[/code]
[code]
Show all
1
2
3
List Items
1
1
2
3
[/code]
I'm fairly new to Javascript so I might be missing something very obvious :(
You haven't assigned oTable as a value - your Javascript should be throwing an error saying this. Are you using Firefox/Firebug, Webkit/Inspect, IE/Debug on? That might help get to the problem of some Javascript issues.
Try something like this:
[code]
var oTable;
$(document).ready(function() {
oTable = $('#table_containing_my_data').dataTable();
$("select#form_for_my_data").change(function () {
var val = $("select#form_for_my_data option:selected").attr('value');
var regex = (val == "" ? "": "^"+val+"$");
oTable.fnFilter (regex,0,false);
});
} );
[/code]
Regards,
Allan
That worked a treat, thanks very much! Now I just need to sit down and work out why... :D