Datatables drop down column filter

harikrishnan

Hi
Am using datatables 1.9 library in my work.I have perfectly implemented individual filter option for columns except those which has drop down content.I have setup my table footer with input text box for filter single value column.But how can I implement it for columns having drop down components.Also I can't filter with drop down values in common filter text box. Please help...

Below is my table initialization codes:


var oTable = $('#mytable').dataTable({
"bDestroy": true,
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"sDom": 'RC<"clear">lfrtip',
"sAjaxSource": 'My Url',
'fnServerData': function (sSource, aoData, fnCallback) {
$.ajax({
'dataType': 'json',
'contentType': 'application/json;',
'type': 'POST',
'url': sSource,
'data': "{}",
'success': fnCallback
});
},
"sAjaxDataProp": "sspData",
"aoColumns": [


{ "mDataProp": "FirstName" },
{ "mDataProp": "LastName" },
{ "mDataProp": "HtmlDataRole" },
{ "mDataProp": "HtmlDataStatus" },//This is my drop down column
{ "mDataProp": "Email" },
{ "mDataProp": "JobTitle" },
{ "mDataProp": "Profession" },
{ "mDataProp": "City" }

],

"aoColumnDefs": [{ "bSortable": false, "aTargets": [0, 6]}],

"fnInitComplete": function (oSettings, json) {
return true;

});

//My custom event for drop down sort -and it fails
$("#slt").change(function () {

oTable.fnFilter(this.value, oTable.oApi._fnVisibleToColumnIndex(oTable.fnSettings(), $("#tblSurveyors_wrapper tfoot input").index(this)));
});


$("#mytable_wrapper tfoot input").keyup(function () {
oTable.fnFilter(this.value, oTable.oApi._fnVisibleToColumnIndex(oTable.fnSettings(), $("#mytable_wrapper tfoot input").index(this)));
});

allan

Firstly it looks like you have a syntax error after fnInitComplete - but I'm sure Firebug / Inspector would highlight that.

Beyond that, I suspect we would need to see a working example.

Allan

harikrishnan

OK thanks Alan,My actual fnInitComplete is just like this :

"fnInitComplete": function() {
//My function after grid initialization complete event.
}

Following is my complete set of code:

(function($) {

$.fn.dataTableExt.oApi.fnGetColumnData = function ( oSettings, iColumn, bUnique, bFiltered, bIgnoreEmpty ) {

if ( typeof iColumn == "undefined" ) return new Array();

if ( typeof bUnique == "undefined" ) bUnique = true;

if ( typeof bFiltered == "undefined" ) bFiltered = true;

if ( typeof bIgnoreEmpty == "undefined" ) bIgnoreEmpty = true;

var aiRows;
if (bFiltered == true) aiRows = oSettings.aiDisplay;
else aiRows = oSettings.aiDisplayMaster; // all row numbers

var asResultData = new Array();
for (var i=0,c=aiRows.length; i -1) continue;
else asResultData.push(sValue);
}

return asResultData;
}}(jQuery));

var oTable = $('#mytable').dataTable({
"bDestroy": true,
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"sDom": 'RC<"clear">lfrtip',
"sAjaxSource": 'My Url',
'fnServerData': function (sSource, aoData, fnCallback) {
$.ajax({
'dataType': 'json',
'contentType': 'application/json;',
'type': 'POST',
'url': sSource,
'data': "{}",
'success': fnCallback
});
},
"sAjaxDataProp": "sspData",
"aoColumns": [


{ "mDataProp": "FirstName" },
{ "mDataProp": "LastName" },
{ "mDataProp": "HtmlDataRole" },
{ "mDataProp": "HtmlDataStatus" },//This is my drop down column
{ "mDataProp": "Email" },
{ "mDataProp": "JobTitle" },
{ "mDataProp": "Profession" },
{ "mDataProp": "City" }

],
"aoColumnDefs": [{ "bSortable": false, "aTargets": [0, 6]}],
"fnInitComplete": function () {
//My function after grid initialization complete event.
});

//My custom event for drop down sort -and it fails
$("#ddlSlt").change(function () {
oTable.fnFilter(this.value, oTable.oApi._fnVisibleToColumnIndex(oTable.fnSettings(), $("#ddlSlt").index(this)));
});

//Column filter event for input elements
$("#mytable_wrapper tfoot input").keyup(function () {
oTable.fnFilter(this.value, oTable.oApi._fnVisibleToColumnIndex(oTable.fnSettings(), $("#mytable_wrapper tfoot input").index(this)));
});

My table footer portion is just like below:












--- Select Status ---
Send to Surveyor
Pending Approval
Pending Approval
Declined