We implemented DataTables for ASP.Net MVC page with an handler action method that returns Json data exampled below.
Also we implemented datatable like below.
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
{"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, "]}
Also we implemented datatable like below.
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 = '<div class="btn-group">'; // 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 ] });
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