Filtering tables using links on left (like a shopping cart filter)

uiguy

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.

fbas

You'll need to know the index of your hidden column, then simply apply fnFilter()

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]

uiguy

Thank you! I hope it works. I get a little confused when it's explained rather than showing the actual complete code, but I'll give it a shot. Appreciate the help!

fbas

I put your code into a page and had the same issues you are having - because bFilter is set false.

remove line 05:
[code]
"bFilter": false,
[/code]

uiguy

Well I just gave it a try but no go. I may have misunderstood. Here's what I did.

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?

uiguy

Nevermind...I got it! What I didn't know was that the column index starts at 0, so setting hidden_column = 2 filters the third column.

Thank you again for your help!