column filter when a column is hidden with bVisible
column filter when a column is hidden with bVisible
bashendriks
Posts: 2Questions: 0Answers: 0
The column-filtering is not working when one of the column's is hidden using the bVisible directive. See below for an example. Could someone help me to solve this mishap. I'm using version 1.5b9
[code]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
DataTables example
@import "media/css/demos.css";
var oTable;
var asInitVals = new Array();
$(document).ready(function() {
oTable = $('#example').dataTable( {
"sAjaxSource": 'media/examples_support/json_source.txt',
"oLanguage": {"sSearch": "Search all columns:"},
"aoColumns": [
/* Engine */ { "bVisible": false },
/* Browser */ null,
/* Platform */ null,
/* Version */ null,
/* Grade */ null
]
} );
$("tfoot input").keyup( function () {
/* Filter on the column (the index) of this element */
oTable.fnFilter( this.value, $("tfoot input").index(this) );
} );
/*
* Support functions to provide a little bit of 'user friendlyness' to the textboxes in * the footer
*/
$("tfoot input").each( function (i) {
asInitVals[i] = this.value;
} );
$("tfoot input").focus( function () {
if ( this.className == "search_init" )
{
this.className = "";
this.value = "";
}
} );
$("tfoot input").blur( function (i) {
if ( this.value == "" )
{
this.className = "search_init";
this.value = asInitVals[$("tfoot input").index(this)];
}
} );
} );
Browser
Platform(s)
Engine version
CSS grade
[/code]
[code]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
DataTables example
@import "media/css/demos.css";
var oTable;
var asInitVals = new Array();
$(document).ready(function() {
oTable = $('#example').dataTable( {
"sAjaxSource": 'media/examples_support/json_source.txt',
"oLanguage": {"sSearch": "Search all columns:"},
"aoColumns": [
/* Engine */ { "bVisible": false },
/* Browser */ null,
/* Platform */ null,
/* Version */ null,
/* Grade */ null
]
} );
$("tfoot input").keyup( function () {
/* Filter on the column (the index) of this element */
oTable.fnFilter( this.value, $("tfoot input").index(this) );
} );
/*
* Support functions to provide a little bit of 'user friendlyness' to the textboxes in * the footer
*/
$("tfoot input").each( function (i) {
asInitVals[i] = this.value;
} );
$("tfoot input").focus( function () {
if ( this.className == "search_init" )
{
this.className = "";
this.value = "";
}
} );
$("tfoot input").blur( function (i) {
if ( this.value == "" )
{
this.className = "search_init";
this.value = asInitVals[$("tfoot input").index(this)];
}
} );
} );
Browser
Platform(s)
Engine version
CSS grade
[/code]
This discussion has been closed.
Replies
It certainly should work probably, but I think there are two things tripping you up here.
1. DataTables will automatically hide the elements that are not needed - so if you have 5 columns defined in aoColumns, you should have five columns (the THs) in thead and tfoot).
2. The second parameter being passed to fnFilter is probably causing problems:
[code]
$("tfoot input").index(this)
[/code]
This doesn't actually get the column you want - it gets the index of that instance - which since you've hidden the first column is one less than what you want. So
[code]
$("tfoot input").index(this) + 1
[/code]
should do it for you.
Hope this helps (and makes sense!)
Allan
Your input makes sense, and i had tried this because this solves this example. My problem is more complex than this example. In my case not only the first column can be hidden, but all the other columns can be hidden to. (to be exact, in my case column 0, 3 and 4 are hidden). Moving these columns to the front, or back of the json dataset is not an option.
Maybe you can implement a function that gets the correct index.
Bye,
Bas Hendriks
Having an automatic function which will do what you want with hidden columns is fairly tricky. There needs to be an algorithm for what column should be passed as the column to search for.
What I would suggest for how this can be done is add custom attribute to your input element (so you would have '').
Then you can modify the code for which column is to be sorted upon to be:
[code]
$(this).attr('column');
[/code]
That should do it...
Allan