individual column filtering: column index confusion

Mithrus

I'm not sure what might be the cause, but when I have a table that doesn't have every column searchable, the index for the fields are off. For example, I set the first column to be not searchable ("bSearchable": false). Now, when I enter a value on the first searchable field, nothing happens. When I enter a value in the second searchable field, it gets stored as the first field, etc. Any ideas on what might be the issue?[code] oTable = $("table#items_summary").dataTable( {
"aoColumns": [{ "sName": "edit_entry","sClass": "edit_entry","bSearchable": false,"sType": "html" },{ "sName": "sku","sClass": "txtucase","bSearchable": true,"sType": "string" },{ "sName": "make","sClass": "txtucase","bSearchable": true,"sType": "string" },{ "sName": "model","sClass": "txtucase","bSearchable": true,"sType": "string" },{ "sName": "style","sClass": "txtucase","bSearchable": true,"sType": "string" },{ "sName": "color","sClass": "txtucase","bSearchable": true,"sType": "string" },{ "sName": "description","sClass": "txtucase","bSearchable": true,"sType": "string" },{ "sName": "size_part","sClass": "txtucase","bSearchable": true,"sType": "string" },{ "sName": "price","sClass": "txtright","bSearchable": true,"sType": "currency" }],
"sPaginationType": "full_numbers",
"oLanguage": {
"sSearch": "Search all columns:"
},
"bPaginate": true,
"bLengthChange": true,
"bFilter": true,
"bSort": false,
"bInfo": true,
"bAutoWidth": false,
"bProcessing": false,
"bServerSide": true,
"sAjaxSource": "query.htm?formid=items&summary=Y"
} );[/code]What I am trying to do is add some row-actions, but I don't want it to be searchable, since it will just be an image/link.
When I enter 10007 into the "make" field, I get this passed to the server:[code]page=>query.htm
formid=>items
summary=>Y
sEcho=>3
iColumns=>9
sColumns=>edit_entry,sku,make,model,style,color,description,size_part,price
iDisplayStart=>0
iDisplayLength=>10
sSearch=>
bEscapeRegex=>true
sSearch_0=>
bEscapeRegex_0=>true
bSearchable_0=>false
sSearch_edit_entry=>
bEscapeRegex_edit_entry=>true
bSearchable_edit_entry=>false
sSearch_1=>10007
bEscapeRegex_1=>true
bSearchable_1=>true
sSearch_sku=>10007
bEscapeRegex_sku=>true
bSearchable_sku=>true
sSearch_2=>
bEscapeRegex_2=>true
bSearchable_2=>true
sSearch_make=>
bEscapeRegex_make=>true
bSearchable_make=>true
sSearch_3=>
bEscapeRegex_3=>true
bSearchable_3=>true
sSearch_model=>
bEscapeRegex_model=>true
bSearchable_model=>true
sSearch_4=>
bEscapeRegex_4=>true
bSearchable_4=>true
sSearch_style=>
bEscapeRegex_style=>true
bSearchable_style=>true
sSearch_5=>
bEscapeRegex_5=>true
bSearchable_5=>true
sSearch_color=>
bEscapeRegex_color=>true
bSearchable_color=>true
sSearch_6=>
bEscapeRegex_6=>true
bSearchable_6=>true
sSearch_description=>
bEscapeRegex_description=>true
bSearchable_description=>true
sSearch_7=>
bEscapeRegex_7=>true
bSearchable_7=>true
sSearch_size_part=>
bEscapeRegex_size_part=>true
bSearchable_size_part=>true
sSearch_8=>
bEscapeRegex_8=>true
bSearchable_8=>true
sSearch_price=>
bEscapeRegex_price=>true
bSearchable_price=>true
[/code]

allan

Hi Mithrus,

I've just quickly tried this as a modification to my demo, and it appears to work as expected for me. So, as a wild stab in the dark, and sorry if my assumptions are wrong, I'm going to guess that you have code something like this "oTable.fnFilter( this.value, $("tfoot input").index(this) );" - but you are removing one of the input fields, which would mess up the index(). Sound reasonable?

Regards,
Allan

Mithrus

Oh, DUH. I added a hidden input for that column footer value and it now works correctly. Thanks so much!

Mithrus

In the future, I anticipate needing to use instead of for some of the search fields. Any idea how I should handle this? At first I was thinking of just changing "tfoot input" to "tfoot .filter" or similar, but will keyup() work for ? I usually key code off of onchange(), but I am not sure how to write the code to work "smoothly" in jquery.

allan

Hi Mithrus,

Good to hear that did the trick. Regarding your question about the select, I think $().change() should do the trick: http://api.jquery.com/change/ . The browser should still fire 'change' when the select menu is changed view keyboard. The one trick is to remember to target the correct column, since the index() trick might not work again.

Regards,
Allan

Mithrus

Good info, thanks. Yeah, I'll need to rethink my strategy when I try to support non-input fields. I think the code will get a bit more complicated (probably a field-specific function).

Now I did find an odd error in my JSON creation script. Evidently having two escaped single quotes is a no no. My client had a few items that were entered as '' instead of " (thats 2 singles instead of a double). I am using addslashes() to escape the quotes. Should I be only escaping the double quotes and leave the single unescaped? I realize this is not related to your module, but I'm so new to JSON I figure hopefully this is just a newbie mistake.

allan

Hi Mithrus,

It's a good question - and I might write an FAQ about it for the site as it does come up frequently. Basically JSON strings (and parameter names) must be double quoted. This means that any double quotes in the string must be escaped, and any single quotes can be left unescaped - since they are just part of the string literal.

See the side bar on http://www.json.org/ for the full syntax.

Regards,
Allan

Mithrus

Well, kick me hard. PHP has it's own nice json_encode() function that will handle all this work for me. Just changed my code to build a standard PHP array, then returned json_encode($arr). Talk about me working harder than I needed too.

mores

Yes, change works, but I too need help working around the index trick. The following will not work.

[code]
$("tfoot input").keyup( function () {
/* Filter on the column (the index) of this element */
oTable.fnFilter( this.value, \$("tfoot input").index(this) );
} );

$("tfoot select").change( function () {
oTable.fnFilter( this.value, \$("tfoot select").index(this) );
} );
[/code]

How can this be re-written to allow input and select items to work ?

I think a new example would be helpful: Individual column filtering (using a mix of "input" and select elements)