Footer filter has empty data

flarpy

Hi all

Loving datatables. I am trying to implement select column filters but while the select boxes appear they are all empty. The output from the console.log is []. If necessary I will provide a link to the page (which isn't publicly accessible yet so setting that up is hassle) but can anyone see anything obviously wrong with my code?

[code]
$(document).ready(function() {
var oTable = $('#programtable').dataTable( {
"bProcessing": true,
"bServerSide": false,
"bDeferRender": true,
"sAjaxSource": '<?php echo Zend_Controller_Front::getInstance()->getRequest()->getRequestUri();?>programs',
"aoColumnDefs": [
{
"mData": "name",
"aTargets": [0],
"sTitle": 'Name',
"sClass": "name",
},
{
"mData": "cookieLength",
"sTitle": "Cookie Length",
"aTargets": [1],
},
{
"mData": "homepageURL",
"sClass": "homepageURL",
"sTitle": 'URL',
"aTargets": [2]
},
{
"mRender": function ( data, type, row ) {
var myString = '';
for(var feedName in data) {
myString += '
'+feedName;
myString +=': '+data[feedName];
}
return myString;
},
"mData": "numProducts",
"sTitle": "# Products",
"aTargets": [3]
},
{
"mData": "events",
"mRender": function ( data, type, row ) {
var myString = '';
for(var eventId in data) {
myString += ''+data[eventId].name+'';
for(var commSchemeId in data[eventId].commissionSchemes) {
//myString += ''+data[eventId].commissionSchemes[commSchemeId].name+'';
for(var commItem in data[eventId].commissionSchemes[commSchemeId].commissionItems) {
for(var tierId in data[eventId].commissionSchemes[commSchemeId].commissionItems[commItem].tiers) {
myString += ''+data[eventId].commissionSchemes[commSchemeId].commissionItems[commItem].tiers[tierId].commission+'';
}
}
}
myString += '';
}
myString += '';
return myString;
},
"sTitle": "Events",
"aTargets": [4]
},
{
"mData": "status",
"sTitle": "Status",
"aTargets": [5]
},
{
"mData": "categories.0.name",
"sTitle": "Category",
"aTargets": [6]
},
{
"mData": "ecpm",
"sTitle": "ECPM",
"aTargets": [7]
},
{
"mData": "ephc",
"sTitle": "EPHC",
"aTargets": [8]
},
],
"bScrollInfinite": false,
"bScrollCollapse": false,
"sScrollY": "600px",
"bStateSave": true,
"iDisplayLength": 50,

} );
$("tfoot th").each( function ( i ) {
console.log(oTable.fnGetColumnData(i));
this.innerHTML = fnCreateSelect( oTable.fnGetColumnData(i) );
$('select', this).change( function () {
oTable.fnFilter( $(this).val(), i );
} );
} );

} );

[/code]

allan

Hi flarpy,

The key thing here is that you are using server-side processing. That involves an Ajax load of the data from the server - and more specifically an async load. That means that your function to add the `select` filters runs before the table has any data in it - hence the problem you are seeing :-).

Now normally the way to address this is with the fnInitComplete callback which is fired when the table has loaded the data.

However(!) since you are using server-side processing, your filters will be incomplete - they are based on the data that is available at the client-side, and since the whole point of server-side processing is to not have the full data set on the client-side, your filters will only be based on the data on the first page.

So there are two ways to address this:

1. Do you need server-side processing? DataTables should be fine with up to 50'000 records with client-side processing, Ajax loading and deferred rendering enabled (perhaps 20'000 records if you need to support Ie6...). If you can use client-side processing, then you can use the fnInitComplete method I mentioned above.

2. If server-side processing is fundamentally required, then you must either have the server-side processing script return the options available for each select menu on the first draw and then put those values into the select filters (again with fnInitComplete), or you would need a second script with an Ajax request can be made to to get the values for the select filters, and again apply them.

Regards,
Allan

flarpy

Thanks for your quick reply Allan.

I understand in principal what you are saying but I'm confused because I have set "bServerSide": false. I take this to mean that while the initial dataset pull will be retrieved from sAjaxSource, all the pagination, sorting etc is done client side. In other words I thought I was already doing client-side processing with ajax loading.

Would be most grateful for any clarification, thanks

allan

Oh my - sorry. I saw bServerSide and just assumed it would be true (since it is false by default there is not need to specify it).

So yes, you are using client-side processing and fnInitComplete is the way to go :-)

Allan