Am getting TypeError: $(...).DataTable(...).columnFilter is not a function..please help me

rajesh123

i have added

My code as below:

$("#tab_msDraft").on('click', function () {
$.ajax({
type : "GET",
url : "./rest/DQ",
datatype : 'json',
success : function(result) {
$("#msDraft_Loading").hide();
$('#msDraftTable').DataTable( {
//"bSort": true,
bJQueryUI: true,
fixedHeader: true,
destroy: true,
"scrollY": 350,
"scrollX": true,
scrollCollapse: true,
data: $.parseJSON(result).data.data,
"columnDefs" : [
{ "name": "Task Id", "data": "taskId", "visible": false, "targets": 0},
{ "name": "Job Number", "title" : "Job Number", "data": "JobNo", "targets": 1,
render: function ( data, type, row, meta ) {
if(type === 'display'){
data = '<a href="#" onClick="displayJobForm('+row.taskId+')">' + data + '</a>';
}
return data;
}
},
{ "name": "Form ID", "title" : "Form ID", "data": null, "defaultContent": "", "targets": 2 },
{ "name": "Submission Description", "title": "Submission Description", "data": "SubDes", "targets": 3 },
{ "name": "TPSM Provider", "title": "TPSM Provider", "data": "tpsmProvider", "targets": 4 },
{ "name": "Health Plan", "title": "Health Plan", "data": "healthPlan", "targets": 5 },
{ "name": "Effective Date", "title": "Effective Date", "data": "EffectiveDate", "targets": 6,
render: function (data, type, row, meta){
return displayFormattedDate(data, type, row, meta);
}
},
{ "name": "Status", "title" : "Status", "data": "RequestStatus", "targets": 7 },
]
}).columnFilter({
sPlaceHolder: "head:before",
aoColumns: [ {
type: "select",
values: [ 'Gecko', 'Trident', 'KHTML',
'Misc', 'Presto', 'Webkit', 'Tasman']
},
{ type: "text" },
{ type: "text" },
{ type: "text" },
{ type: "text" },
null,
null
]
});

        },

        error : function(xhl, status, error) {
            alert(xhl + ' - ' + status + ' - ' + error);
        }
    });
});

allan

The third party columnFilter function doesn't add itself to $().DataTale(). It adds itself to $().dataTable().

Allan