web-dev-qa-db-ja.com

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エラーではありませんが、何が欠けているのか分かりません。

ソース： https://datatables.net/examples/api/multi_filter.html

javascriptasp.netdatatables
37
user3090790

変更してみてください

_var table = $('#sample_3').dataTable();
_

に

_var table = $('#sample_3').DataTable();
_

...つまり、DataTable()を大文字にします。ソース： https://datatables.net/manual/api#Accessing-the-API

126
sebastian_k

変化する：

table.columns()

に：

table.api().columns()

それは私のために働いた。

31
Seeralan Saaluvar

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

それが誰かを助けることを願っています。

5
Nadim Aseq A Arman

これまでの回答のどれも私にとって問題を解決しませんでした。

私が見つけた解決策は、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" }
        ]
    });

それが役に立てば幸い。

3
LucasBr

このようなものを試してください

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

この質問が尋ねられてからしばらく経ちましたが、誰かを助けるかもしれないので、これを投稿しています。

私は同様の問題を抱えていましたが、いくつかの検索の後、- http://jquery-datatables-column-filter.googlecode.com/svn/trunk/media/js/jquery.dataTablesにあるファイルを含める必要があることに気付きました。 columnFilter.js 私のコードに。

1
Aditya

ご協力いただきありがとうございます。同じエラーメッセージが表示されました。しかし、ほとんどすべてを試した後、私のエラーは単にnot

<tfoot> ... </tfoot>
1
leole

私はこれが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の古いバージョンでは、データテーブルは関数で呼び出されました：

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

そのため、古いバージョンのテーブルが返されましたが、これには関数<tablevarname>.columns()が含まれていなかったため、呼び出し元の新しい関数：$('#dt1').DataTable();は修正する必要があります（Rizzimが既に述べたように）データテーブルを更新する必要があるため、関数が含まれています...

（英語が悪いのでごめんなさい）

0
Julian Schäfer