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>

我得到table.columns不是函数js错误，缺少什么我不明白。

来源：https://datatables.net/examples/api/multi_filter.html

Answer 1

尝试更改

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

到

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

...即，将DataTable()大写。资料来源：https://datatables.net/manual/api#Accessing-the-API

Answer 2

变化：

table.columns()

为：

table.api().columns()

它对我有用。

Answer 3

我正在尝试使用dataTables的makeEditable（）函数。如果我用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();
            });
        });

希望它能帮到某人。

Answer 4

之前的答案都没有为我解决问题。

我找到的解决方案是使用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" }
        ]
    });

希望它有所帮助。

Answer 5

尝试这样的事情

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 6

感谢您的帮助。我有相同的错误消息。但在尝试了几乎我发现的所有内容之后，我的错误只是不有一个

<tfoot> ... </tfoot>

在我的dataTable中阻止。插入此修复后，我的dataTable可以将搜索输入附加到此tfoot。

Answer 7

自问这个问题以来已经有一段时间了，但是我发帖说这可能对某人有帮助。

我有类似的问题，经过一些搜索，我意识到我必须将位于 - http://jquery-datatables-column-filter.googlecode.com/svn/trunk/media/js/jquery.dataTables.columnFilter.js的文件包含在我的代码中。

Answer 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 Library，因为它们都包含在此链接中。之后一切正常，没有任何错误...

所以我弄清楚为什么问题出现在旧版本上：在较旧版本的Datatables中，使用函数

调用数据表

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

所以并且返回了旧版本的表，其中没有包含函数<tablevarname>.columns()所以调用新函数：$('#dt1').DataTable();应该修复它（正如Rizzim已经说过的那样）但要做到这一点你必须更新你的数据表，所以功能包括在内......

（抱歉英语不好）

table.columns不是datatable.js中的函数

8 个答案: