table.columns 不是 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>

我得到 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 的 cmets 中添加一些小东西。

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 可以将搜索输入附加到这个 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 库和数据表库，因为它们都包含在此链接中。之后一切正常，没有任何错误......

所以我想出了问题出在旧版本上的原因： 在旧版本的数据表中，数据表是用函数调用的：

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

所以和旧版本的表被归还了，它不包括函数<tablevarname>.columns()所以调用新函数：$('#dt1').DataTable();应该修复它（正如Rizzim已经说过的）但要做到这一点，你必须更新你的数据表，所以包含函数...

（抱歉英语不好）