table.columns is not a function in datatable.js

Solution 1:

Try changing

var table = $('#sample_3').dataTable();

to

var table = $('#sample_3').DataTable();

... that is, capitalize the DataTable(). Source: https://datatables.net/manual/api#Accessing-the-API

Solution 2:

Change:

table.columns()

to:

table.api().columns()

It worked for me.

Solution 3:

I was trying this with a makeEditable() function of dataTables. If I change dataTables() with DataTables() it doesn't work.

The answer of h0mayun works for me. Just in case if someone else search for this problem I'm adding a little thing with h0mayun's comments.

var table = $('#sample_3').dataTable();
$('#sample_3 tfoot th').each(function (i) 
{

            var title = $('#sample_3 thead th').eq($(this).index()).text();
            // or just var title = $('#sample_3 thead th').text();
            var serach = '<input type="text" placeholder="Search ' + title + '" />';
            $(this).html('');
            $(serach).appendTo(this).keyup(function(){table.fnFilter($(this).val(),i)})
});

And remove the following part

// Apply the filter
        table.columns().eq(0).each(function (colIdx) {

            $('input', table.column(colIdx).footer()).on('keyup change', function () {

                table
                    .column(colIdx)
                    .search(this.value)
                    .draw();
            });
        });

Hope it'll help someone.