web-dev-qa-db-fra.com

table.columns n'est pas une fonction dans 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>

J'ai obtenu table.columns n'est pas une erreur de fonction js, ce qui manque je ne comprends pas.

source: https://datatables.net/examples/api/multi_filter.html

javascriptasp.netdatatables
33
user3090790

Essayez de changer 

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

à 

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

... c'est-à-dire capitaliser la DataTable(). Source: https://datatables.net/manual/api#Accessing-the-API

110
sebastian_k

Changement:

table.columns()

à:

table.api().columns()

Cela a fonctionné pour moi.

26
Seeralan Saaluvar

J'essayais cela avec une fonction makeEditable () de dataTables . Si je change dataTables () avec DataTables (), cela ne fonctionne pas.

La réponse de h0mayun fonctionne pour moi. Juste au cas où quelqu'un chercherait ce problème, j'ajouterais un petit quelque chose avec les commentaires de 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)})
});

Et enlever la partie suivante

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

J'espère que ça va aider quelqu'un.

5
Nadim Aseq A Arman

Aucune des réponses précédentes n'a résolu le problème pour moi.

La solution que j'ai trouvée utilisait table.api().column(colIdx) au lieu de table.column(colIdx).

Exemple de travail que j'ai développé pour une table avec des noms et des âges:

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

J'espère que ça aide.

3
LucasBr

Essayez quelque chose comme ça

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

Cela fait un moment que cette question a été posée, mais je poste ceci car cela pourrait aider quelqu'un.

J'ai eu un problème similaire et après quelques recherches, j'ai réalisé que je devais inclure le fichier situé à l'emplacement - http://jquery-datatables-column-filter.googlecode.com/svn/trunk/media/js/jquery.dataTables.columnFilter. js à mon code.

1
Aditya

Merci de votre aide. J'ai eu le même message d'erreur. Mais après avoir essayé à peu près tout ce que j’ai découvert, c’est que mon erreur était tout simplement pas d’avoir un 

<tfoot> ... </tfoot>
bloquer dans mon dataTable. L'insertion de ceci l'a corrigé et mon dataTable pourrait annexer les entrées de recherche à ce tfoot.

1
leole

Je sais que ce message date de 2 ans, mais il figure toujours en tête des résultats de recherche sur Google lors de la recherche de ce problème. Donc, j'ai eu le même problème mais je l'ai corrigé sans changer de code. Le problème de mon code était que j’utilisais une version plus ancienne de jQuery ou Datatables (je ne savais pas laquelle était la cause du problème) et j’ai donc généré un nouveau lien sur le site Datatables:

https://datatables.net/download/index

avec y compris jQuery2.x et le reste laissé par défaut:

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

Par conséquent, vous devez supprimer votre bibliothèque jQuery incluse et votre bibliothèque Datatables, car elles sont toutes deux incluses dans ce lien. Après cela tout fonctionne bien sans erreur ...

J'ai donc compris pourquoi le problème se posait sur les anciennes versions: Dans les anciennes versions de Datatables, le datatable était appelé avec la fonction:

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

et ainsi et l'ancienne version de la table a été restituée, ce qui n'incluait PAS la fonction <tablevarname>.columns(), donc la nouvelle fonction appelante: $('#dt1').DataTable(); devrait y remédier (comme Rizzim l'a déjà dit), mais pour cela, vous devez mettre à jour vos tables de données afin que la fonction soit incluse ...

(Désolé pour mon mauvais anglais)

0
Julian Schäfer