Table.columns не является функцией в 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>

Я получил table.columns не является функцией js error, чего не хватает, я не понимаю.

источник: https://datatables.net/examples/api/multi_filter.html

Ответ 1

Попробуйте изменить

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

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

... то есть, заглавные буквы DataTable(). Источник: https://datatables.net/manual/api#Accessing-the-API

Ответ 2

Изменить:

table.columns()

table.api().columns()

Это сработало для меня.

Ответ 3

Я пытался это сделать с помощью makeEditable() функции dataTables. Если я изменил dataTables() с DataTables(), это не сработает.

Ответ h0mayun работает для меня. На всякий случай, если кто-то еще ищет эту проблему, я добавляю мелочь с комментариями h0mayun.

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

И удалите следующую часть

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

Надеюсь, что это поможет кому-то.

Ответ 4

Попробуйте что-то вроде этого

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

Ответ 5

Ни один из предыдущих ответов не решил проблему для меня.

Я нашел решение, используя table.api().column(colIdx) вместо table.column(colIdx).

Рабочий пример, который я разработал для таблицы с именами и возрастами:

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

Надеюсь, что это поможет.

Ответ 6

Прошло некоторое время с тех пор, как был задан этот вопрос, но я публикую это, поскольку это может помочь кому-то.

У меня была аналогичная проблема, и после некоторых поисков я понял, что мне нужно включить файл, расположенный по адресу http://jquery-datatables-column-filter.googlecode.com/svn/trunk/media/js/jquery.dataTables.columnFilter.js в мой код.

Ответ 7

Спасибо за вашу помощь. У меня было такое же сообщение об ошибке. Но, пробовав почти все, что я узнал, моя ошибка была просто not,

<tfoot> ... </tfoot>

блок в моей таблице данных. Вставив это исправленное, я и моя dataTable могли добавлять в него данные поиска.

Ответ 8

Я знаю, что это 2-летний пост, но он все еще находится на вершине результатов поиска в Google при поиске этой проблемы. Поэтому у меня была такая же проблема, но я исправил ее без изменения кода. Проблема по моему коду заключалась в том, что я использовал более старую версию jQuery или Datatables (не уверен, какой из них вызвал проблему), поэтому я генерирую новую ссылку на сайте Datatables:

https://datatables.net/download/index

с включением jQuery2.x, а остальные останутся по умолчанию:

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

Поэтому вам нужно удалить вашу включенную библиотеку jQuery и библиотеку Datatables, потому что они оба включены в эту ссылку. После этого все отлично работает без ошибок...

Итак, я понял, почему проблема связана с более старыми версиями: В более старых версиях Datatables вызываемый datatable вызывался с помощью функции:

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

и поэтому была возвращена старая версия таблицы, в которую НЕ включалась функция <tablevarname>.columns(), поэтому вызывающая новая функция: $('#dt1').DataTable(); должна исправить ее (как уже сказал Rizzim), но для этого вам необходимо обновить datatables, поэтому функция включена...

(Извините за плохой английский)