Individual column filter not working

sarveshvemana

Hi, I'm trying to implement individual column filter but it is showing error as
[code]
TypeError: $(...).dataTable(...).columnFilter is not a function

$('#jQueryInvoices').dataTable().columnFilter();
[/code]
My sample code is :
I tried it in two ways , first is
[code]
$(document).ready(function() {
$('#jQueryInvoices').dataTable().columnFilter();
});
[/code]
and second is
[code]
$("#jQueryInvoices").dataTable({
"bServerSide": false,
"sAjaxSource":ajaxUrl,
"sAjaxDataProp": "ResultSet.aaData",
"bProcessing": true,
"sPaginationType": "full_numbers",
"bJQueryUI": true,
"bDestroy": true,
"sEcho": 1,
"iTotalRecords": 1,
"iTotalDisplayRecords": 10,
"aoColumns": [
{ "mDataProp": "controlNumber",sDefaultContent: "" },
{ "mDataProp": "runNumber",sDefaultContent: "" },
{ "mDataProp": "invoiceNumber" },
{ "mDataProp": "status" },
{ "mDataProp": "invoiceAmount" }
]
}).columnFilter();
[/code]
And included



Shall i mention any table footer?? I'm using data table 1.9 version. Please tell me the solution where i'm missing

tangerine

I don't use ColumnFilterWidgets so I may be wrong, but I don't see you initialising sDom:
"sDom": 'W<"clear">lfrtip'

sarveshvemana

As per the API, i read that .columnFilter() is an add on plugin. It is required to use sDom??

tangerine

Look at the example in the docs.

harishrao

Use this Code Works Fine

$(document).ready(function () { $('#myDataTable tfoot th').each(function () { var title = $('#myDataTable thead th').eq($(this).index()).text(); $(this).html(''); }); var table = $('#myDataTable').dataTable().columnFilter(); $("#myDataTable tfoot input").on('keyup change', function () { table.column($(this.value).parent().index() + ':visible') .filter(this.value) .draw(); }); });