Using multi column filter with Ajaxsource

PeteB

Hi,

I have successully used the sample multi_column_filter to create drop-down select box for a table that is in the DOM but when I try to apply the same thing to a table that is built using Ajaxsource my drop down boxes appear but are not popuated with values from the column.

Here's my table: [code]


Season
Date
Team
H/A
Comp
Opponents
Result
Players
GameID (null)


















[/code]

PeteB

And here's my Javascript: [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 wany 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;
// use all rows
else aiRows = oSettings.aiDisplayMaster; // all row numbers

// set up data array
var asResultData = new Array();

for (var i=0,c=aiRows.length; i -1) continue;

// else push the value onto the result data array
else asResultData.push(sValue);
}

return asResultData;
}}(jQuery));


function fnCreateSelect( aData )
{
var r='', i, iLen=aData.length;
for ( i=0 ; i source.ptsagst) {
res1 = 'Win '
} else if (source.ptsfor < source.ptsagst) {
res1 = 'Loss '
}
return res1 + source.ptsfor + ' - ' + source.ptsagst;
},
"sWidth": "15%"
},
{ "mDataProp": function (source, type, val) {
var ret1 = '' + 'Players';
return ret1 + source.gameID + ret2;
}
},
{ "mDataProp": "gameID",
"bVisible": false
}
]
} );

/* Add a select menu for each TH element in the table footer */
$("tfoot td").each( function ( i ) {
this.innerHTML = fnCreateSelect( oTable.fnGetColumnData(i) );
$('select', this).change( function () {
oTable.fnFilter( $(this).val(), i );
} );
} );
} ); [/code]
Can anyone see my problem? Does the script only work with DOM defined tables?

Should I convert my table to PHP generated HTML?

Thanks.

allan

Because you've got an async Ajax request going on there, the footer "builder" (fnCreateSelect and friends) will run before the data has been loaded from the server - hence the issue. One way to address this is to move your footer builder into fnInitComplete - other ways might include rebuilding the footer on the 'xhr' event, although that might be slightly more complicated than a simple modification to your code above.

Allan

PeteB

Allan,

thanks for the response - I understand the theory and tried to add fnInitComplete but my coding skills are a bit lacking. Therefore, I've opted to replaced the Ajaxsource with a PHP loop which builds the TR/TD html entries

Pete.

PeteB

p.s. All was o.k., but I wanted to have the dropdown list sorted. Fortunately, this was a simple thing todo (once I'd found this post: http://datatables.net/forums/discussion/comment/17116#Comment_17116)