DataTables individual column filtering

jkaton125

I am using the code from the individual column filtering and I came across what I think could be a bug in the code. I have multiple tables in my site on different pages. Each table has its own settings therefor I need to utilize this filtering multiple times. I found that when doing this if you give your footer a class name and each tables footer has the same class name then datatables crashes.

I have pulled the common code out into a single file:

[code]
(function($) {
/*
* Function: fnGetColumnData
* Purpose: Return an array of table values from a particular column.
* Returns: array string: 1d data array
* Inputs: object:oSettings - dataTable settings object. This is always the last argument past to the function
* int:iColumn - the id of the column to extract the data from
* bool:bUnique - optional - if set to false duplicated values are not filtered out
* bool:bFiltered - optional - if set to false all the table data is used (not only the filtered)
* bool:bIgnoreEmpty - optional - if set to false empty values are not filtered from the result array
* Author: Benedikt Forchhammer
*/

$.fn.dataTableExt.oApi.fnGetColumnData = function ( oSettings, iColumn, bUnique, bFiltered, bIgnoreEmpty ) {
// check that we have a column id
if ( typeof iColumn == "undefined" ) return new Array();

// by default we only want unique data
if ( typeof bUnique == "undefined" ) bUnique = true;

// by default we do want to only look at filtered data
if ( typeof bFiltered == "undefined" ) bFiltered = true;

// by default we do not wany to include empty values
if ( typeof bIgnoreEmpty == "undefined" ) bIgnoreEmpty = true;

// list of rows which we're going to loop through
var aiRows;

// use only filtered rows
if (bFiltered == true){
aiRows = oSettings.aiDisplay;
} else {
// use all rows
aiRows = oSettings.aiDisplayMaster; // all row numbers
}

// set up data array
var asResultData = new Array();
var sortType = false;
for (var i=0,c=aiRows.length; i -1){
// ignore unique values?
continue;
} else {
// else push the value onto the result data array
asResultData.push(sValue);
}
}
if(sortType){
return asResultData.sort(numOrdA);
}else{
return asResultData.sort(alph);
}
}})(jQuery);

function fnCreateSelect( aData )
{
var r='', i, iLen=aData.length;
for ( i=0 ; ib) return 1;
if(a==b) return 0;
if(a

waseem

Hi I am also applying searching on the table using the data grid. I occur the same problem in filtering the values.

I am doing like this, for first table i am using the code:-

var j = jQuery.noConflict();
j(document).ready(function() {

var oTable = j("#example").dataTable( {
"oLanguage": {
"sSearch": "Search all columns:"
},
"bJQueryUI": true,
"iDisplayLength": 10,
"sPaginationType": "full_numbers"
});

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


and for the second table:-

var j = jQuery.noConflict();
j(document).ready(function() {
var oTable = j("#example1").dataTable( {
"oLanguage": {
"sSearch": "Search all columns:"
},
"bJQueryUI": true,
"iDisplayLength": 10,
"sPaginationType": "full_numbers"
});

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



This is my footer code for first table:-








This is my footer code for second table:-








As you can see I have same code for the tfoot
I also try to declare tfoot like this but it didn't work.
I don't know where i am doing wrong so please help me with this.

waseem

var j = jQuery.noConflict();
j(document).ready(function() {

var oTable = j("#example").dataTable( {
"oLanguage": {
"sSearch": "Search all columns:"
},
"bJQueryUI": true,
"iDisplayLength": 10,
"sPaginationType": "full_numbers"
});

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

j("tfoot th").each( function ( i ) {
if(this.innerHTML=="drop")
{
this.innerHTML = fnCreateSelect( oTable.fnGetColumnData(i) );
j(\'select\', this).change( function () {
oTable.fnFilter( j(this).val(), i );
} );}
} );

j("tfoot input").each( function (i) {
asInitVals[i] = this.value;
} );

j("tfoot input").focus( function () {
if ( this.className == "search_init" )
{
this.className = "";
this.value = "";
}
} );

j("tfoot input").blur( function (i) {
if ( this.value == "" )
{
this.className = "search_init";
this.value = asInitVals[j("tfoot input").index(this)];
}
} );

} );

Actually this is the whole script i am using.
Might be helpful to you.