columnFilter Plug-in and fnAddData function Working Order Problem

columnFilter Plug-in and fnAddData function Working Order Problem

bahadirarslanbahadirarslan Posts: 9Questions: 1Answers: 0
edited May 2013 in Plug-ins
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

Replies

  • allanallan Posts: 61,584Questions: 1Answers: 10,084 Site admin
    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
  • bahadirarslanbahadirarslan Posts: 9Questions: 1Answers: 0
    Thanks for answer. I also opened an issue at their issue tracker.
    But interestingly no one opened an issue like that.
  • bahadirarslanbahadirarslan Posts: 9Questions: 1Answers: 0
    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?
  • allanallan Posts: 61,584Questions: 1Answers: 10,084 Site admin
    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
  • bahadirarslanbahadirarslan Posts: 9Questions: 1Answers: 0
    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?
  • bahadirarslanbahadirarslan Posts: 9Questions: 1Answers: 0
    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.
  • bahadirarslanbahadirarslan Posts: 9Questions: 1Answers: 0
    I solved my problem by adding [code]"async": false,[/code] to fnServerData function.
  • allanallan Posts: 61,584Questions: 1Answers: 10,084 Site admin
    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
This discussion has been closed.