table.columns is not a function in datatable.js

Question

<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

have you included the //cdn.datatables.net/1.10.0/js/jquery.dataTables.js script file — Ashish Negi, Jun 20 '14 at 11:06
this script should execute after loading that file and also after document has got `#sample_3` i.e. `onLoad()` — Ashish Negi, Jun 20 '14 at 11:26
Use the answers below, the op most likely isn't checking the post. — Shane, Feb 07 '15 at 14:25

score 155 · Answer 1 · answered Jun 22 '14 at 22:26

155

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

answered Jun 22 '14 at 22:26

sk29910

2,326
1
18
23

This was the simple solution for me – AdRock May 19 '16 at 09:27

score 40 · Answer 2 · edited Aug 02 '16 at 06:24

40

Change:

table.columns()

to:

table.api().columns()

It worked for me.

edited Aug 02 '16 at 06:24

Frits

7,341
10
42
60

answered Aug 02 '16 at 05:38

Seeralan Saaluvar

426
4
3

2

This is the right way if some one want to use table.dataTable instead of table.DataTable. (see the Capital "d" difference) – alhashmiya Aug 23 '16 at 10:15
This one should be marked as a correct answer as well. – Gagan Dec 02 '17 at 14:34
2

changing it to otable.api().cloumns() gives me `Uncaught TypeError: otable.api is not a function` error – abhi Jul 26 '18 at 15:55
thanks for the tips :) i use yadcf with dataTables and i add the same problem – Mathieu Mourareau Feb 27 '19 at 14:48

score 5 · Answer 3 · answered Feb 24 '15 at 14:46

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.

Thank you so much buddy. It saved my day. Thanks a lot. :) – NewbieCoder Nov 03 '17 at 06:51 — NewbieCoder, Nov 03 '17 at 06:51

score 4 · Answer 4 · answered Jul 29 '15 at 19:14

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.

This must be accepted answer. You save my day. I wish i could make billion upvote for this — Vipul Hadiya, May 02 '16 at 11:16
This is the right way if some one want to use table.dataTable instead of table.DataTable. (see the Capital "d" difference) — alhashmiya, Aug 23 '16 at 10:14

score 2 · Answer 5 · answered Nov 22 '14 at 09:26

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

score 1 · Answer 6 · answered Jun 25 '15 at 05:35

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.

score 1 · Answer 7 · answered Aug 12 '15 at 18:28

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.

score 1 · Answer 8 · answered Jul 05 '16 at 07:40

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)

table.columns is not a function in datatable.js

8 Answers8

Linked