Filtering tables using links on left (like a shopping cart filter)
Filtering tables using links on left (like a shopping cart filter)
I admit defeat :( ...and am also about to donate :)
I have tried using the filter API but just don't fully understand it and I really need some help.
Currently I am initializing the table like this:
[code]
$(document).ready(function() {
$('#results').dataTable( {
"aaSorting": [[ 4, "desc" ]],
"bJQueryUI": true,
"bFilter": false,
"bAutoWidth": false,
"sWidth": "50%",
"sPaginationType": "full_numbers",
"sDom": '<"topL"i>rt<"topR"l>rt<"bottom"p>',
"aoColumns" : [null, null, { "bSearchable": true, "bVisible": false },{ "bSearchable": true, "bVisible": false }],
} );
} );
[/code]
It works great this way but I need to add filtering as a list of links on the left that, when clicked, will filter by text in a hidden column.
For example, the list of links on the left might be:
Black
Green
Red
When "black" is clicked, only rows which contain the word "black" should be displayed in the table. Even better if I can narrow the searching down to a few specific column. Also, how do I label the links? By ID or Class seems reasonable..
I have tried following the instructions for the API (and searching the forums) but I always end up initializing the table too many times and can't work out how to get around it. I'm 90% UI guru but only 10% Javascript capable and need some help. Thanks in advance.
I have tried using the filter API but just don't fully understand it and I really need some help.
Currently I am initializing the table like this:
[code]
$(document).ready(function() {
$('#results').dataTable( {
"aaSorting": [[ 4, "desc" ]],
"bJQueryUI": true,
"bFilter": false,
"bAutoWidth": false,
"sWidth": "50%",
"sPaginationType": "full_numbers",
"sDom": '<"topL"i>rt<"topR"l>rt<"bottom"p>',
"aoColumns" : [null, null, { "bSearchable": true, "bVisible": false },{ "bSearchable": true, "bVisible": false }],
} );
} );
[/code]
It works great this way but I need to add filtering as a list of links on the left that, when clicked, will filter by text in a hidden column.
For example, the list of links on the left might be:
Black
Green
Red
When "black" is clicked, only rows which contain the word "black" should be displayed in the table. Even better if I can narrow the searching down to a few specific column. Also, how do I label the links? By ID or Class seems reasonable..
I have tried following the instructions for the API (and searching the forums) but I always end up initializing the table too many times and can't work out how to get around it. I'm 90% UI guru but only 10% Javascript capable and need some help. Thanks in advance.
This discussion has been closed.
Replies
you'll want a reference of your table in a variable, so in your $(document).ready() function assign it to a variable (maybe this is why you were re-initializing it so much?)
[code]
oTable = null;
hidden_column = 3; // change this to the index of your column
$(document).ready(function() {
oTable = $('#results').dataTable( {
...
[/code]
in your links (html code)
[code]
black
blue
etc.
[/code]
remove line 05:
[code]
"bFilter": false,
[/code]
For the JS:
[code]
oTable = null;
hidden_column = 3; // change this to the index of your column
$(document).ready(function() {
var oTable = $('#results').dataTable( {
"bJQueryUI": true,
"bAutoWidth": false,
"sWidth": "50%",
"aoColumns" : [null, null, { "bSearchable": true, "bVisible": false }],
"sPaginationType": "full_numbers",
"sDom": '<"topL"i>rt<"topR"l>rt<"bottom"p>'
} );
} );
[/code]
For the links:
[code]
Black
Blue
[/code]
There are three columns, one of which is hidden. What did I miss here?
Thank you again for your help!