table.columns is not a function in datatable.js

Answer 1

I know this is a 2 year old post, but it is still on top search results on Google when searching for this problem. So I had the same problem but I fixed it without changing code. The problem by my code was that I used a older jQuery or Datatables version (not sure which one caused trouble) so I generatet a new link on the Datatables site:

https://datatables.net/download/index

with including jQuery2.x and the rest left on default:

<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.12/datatables.min.js"></script>

Therefore you have to remove your included jQuery Library and the Datatables Library, because both of them is included in this link. After that everything work fine without any error...

So I figured out why the problem is on the older versions: In the older versions of Datatables the datatable was called with the function:

$('#dt1').dataTable();

and so and old version of the table was given back, which NOT included the function <tablevarname>.columns() so the calling new function: $('#dt1').DataTable(); should fix it (as Rizzim already said) but to do this you have to update your datatables, so the function is included...

(Sorry for bad english)

Answer 2

Thanks for your help. I had the same error message. But after trying nearly everything I found out, that my error was simply not having a

<tfoot> ... </tfoot>

block in my dataTable. Inserting this fixed it and my dataTable could append the search-inputs to this tfoot.

Answer 3

Try something like this

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)})
});

Answer 4

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

Answer 5

Change:

table.columns()

to:

table.api().columns()

It worked for me.

Answer 6

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.