columnFilter Plug-in and fnAddData function Working Order Problem

bahadirarslan

We implemented DataTables for ASP.Net MVC page with an handler action method that returns Json data exampled below.

[code]{"sEcho":"6","iTotalRecords":73,"iTotalDisplayRecords":73,"aaData":[["5","Test","Test","DonanimTest","HP","HP ProLiant 1","8 ₺","Müsait","6","item_shelve, use, reservation, item_warranty, "],["8","12345","Deneme","Geçici AssetType","Dell","Server 2008 R2","5 ₺","Müsait","","item_shelve, use, reservation, item_warranty, "],["9","1342","Deneme","Geçici AssetType","Dell","Server 2008 R2","5 $","Serviste","","unwarranty, "]}[/code]

Also we implemented datatable like below.
[code]
var oTable = $('#datatables').dataTable({
"sDom": "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>",
"sPaginationType": "bootstrap",
"bServerSide": true,
"bFilter": true,
"bLengthChange": false,
"bSort": true,
"sAjaxSource": "/AssetItem/AjaxHandler",
"bProcessing": true,
"iDisplayLength": 50,
"bAutoWidth": false,
"bStateSave": true,
"sOrdering": true,
"aLengthMenu": [[5, 10, 25, 50], [5, 10, 25, 50]],
"aoColumns":
[
{
"sName": "AssetItemID",
"sWidth": "50px"
},
{
"sName": "ServiceTag"
},
{
"sName": "Name"
},
{
"sName": "Model.AssetType.Name"
},
{
"sName": "Brand.Name"
},
{
"sName": "Model.Name"
},
{
"sName": "Price"
},
{
"sName": "CurrentStatus"
},
{
"bSearchable": false,
"bSortable": false
}
],
"aoColumnDefs": [
{
"aTargets": [8],
"fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {

var actions = '';
// some codes for buttons at row level

$(nTd).empty();
$(nTd).prepend(actions);
}
}],
"fnDrawCallback": function (oSettings) {
var anControl = $('input', oSettings.aanFeatures.f);
$("tbody").highlight(anControl.val());
}
}).fnFilterOnReturn().columnFilter({
aoColumns: [null,
{ type: "text" },
{ type: "text" },
{ type: "select" },
{ type: "select" },
{ type: "select" },
null,
{ type: "select" },
null
]

});[/code]

When we work this code, datatable loads with successfuly but columnFilter select elements were populated with values in specified row. After a few debug sessions i noticed that datatables fnAddData function was called after columnFilter plug-in's initialization.

I had tried to add columnFilter init. to fnDrawCallback but this, after second request columnFilter init was called by infinitive times.

So i couldn't find a way to call columnFilter init after fnAddData function.

You can access debug information from here: http://debug.datatables.net/ubexef

allan

Sounds like an error in the column filtering plug-in. it is a third party library - I'd suggest opening an issue in that project's issue tracker.

Allan

bahadirarslan

Thanks for answer. I also opened an issue at their issue tracker.
But interestingly no one opened an issue like that.

bahadirarslan

hi again allan,

unfortunately there is something wrong with my datatable. because i removed columnFilter plug-in and tried http://www.datatables.net/examples/api/multi_filter_select.html but same thing happened.
Because of a unknown reason, fnAddData called after [code]$("tfoot th").each(function (i) {
this.innerHTML = fnCreateSelect(oTable.fnGetColumnData(i));
$('select', this).change(function () {
oTable.fnFilter($(this).val(), i);
});
});[/code]

Do you have an idea?

allan

Well you'd need to recreate the `select` element if you want all of the latest data in it, after you add new data. Are you doing that?

Allan

bahadirarslan

I think i am not, because i thought fnCreateSelect method will be called after data pushed to the data array.
So how can i recreate select elements?

bahadirarslan

i couldn't find the problem still. Either columnFilter plug-in or fnCreateSelect method fnAddData works later.. I think this is not related only plug-in; may be my settings.

bahadirarslan

I solved my problem by adding [code]"async": false,[/code] to fnServerData function.

allan

I see - you were creating the filters before the Ajax data was loaded? Yes, that wouldn't work then. You could do it in fnInitComplete and avoid using `async` .

Allan