table.columns is not a function in datatable.js

<script>

    jQuery(document).ready(function () {

     
        $('#sample_3 tfoot th').each(function () {

            var title = $('#sample_3 thead th').eq($(this).index()).text();

            $(this).html('<input type="text" placeholder="Search ' + title + '" />');
        });

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

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

    });
</script>

I got table.columns is not a function js error , what is missing i am not understand.

source : https://datatables.net/examples/api/multi_filter.html

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

Change:

table.columns()

to:

table.api().columns()

It worked for me.

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.

None of the previous answers solved the problem for me.

The solution I found was using table.api().column(colIdx) instead of table.column(colIdx).

Working example I developed for a table with names and ages:

	table = jQuery('#sel').dataTable( {
		"initComplete": function( settings, json ) {
			jQuery("#sel_filter").find("input").unbind();
			jQuery("#sel_filter").find("label").after(
				"<select id='opts'><option value='0'>Name</option>"+
				"<option value='1'>Age</option></select>");
			jQuery("#sel_filter").find("input").on('keyup change', function(){
				table.api().columns( jQuery("#opts").val()).search( this.value ).draw();
			});
		},
		"ajax": {
			"url": "urlvalue",
			"type": "GET"
		},
		"columns": [
			{ "data": "name" },
			{ "data": "age" }
		]
	});

Hope it helps.

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

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.

It has been a while since this question was asked but I am posting this as it might help someone.

I had similar issue and after some searching I realized I had to include file located at - http://jquery-datatables-column-filter.googlecode.com/svn/trunk/media/js/jquery.dataTables.columnFilter.js to my code.

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)