web-dev-qa-db-fra.com

Impossible de réinitialiser DataTable - données dynamiques pour datatable

J'ai une table de données montrant tous les employés. Cela fonctionne bien pour tous les employés sur document.ready. J'ai une balise de sélection contenant le type d'employés comme 'project_manager' & 'team_leader', Et lors du changement de type d'employé, j'appelle une fonction get_employees(emp_type) et je passe le type d'employé sélectionné.

Il obtient les données souhaitées et appropriées dans la réponse ajax, mais lance un avertissement

DataTables warning: table id=example - Cannot reinitialise DataTable. For more information about this error, please see http://datatables.net/tn/3

J'ai essayé de le détruire, mais pas de chance.

également essayé pour

$('#example').dataTable().fnClearTable();
$('#example').dataTable().fnDestroy();

il efface la table et affiche les données nouvellement ajoutées, mais ajoute à chaque fois de nouvelles images de tri avec le nom de la colonne.

Voici mon extrait de code.

$(document).ready(function() {
            get_employees('all');
        });

        function get_employees(emp_type)
        {
            $.ajax({
                url: '../ajax_request.php',
                type: "POST",
                data: {
                    action: "admin_get_all_employees",
                    type: emp_type
                },
                success: function(response) {
                    var response = jQuery.parseJSON(response);

                    // $('#example').destroy(); tried this but haven’t worked

                    $('#example').dataTable({
                        "aaData": response.data,
                    });
                }
            });
        }

Merci d'avance.

jqueryajaxdynamicdatatabledestroy
22
Pramod

Dans la version actuelle de DataTables (1.10.4), vous pouvez simplement ajouter destroy:true à la configuration pour vous assurer que toute table déjà présente est supprimée avant d'être réinitialisée.

$('#example').dataTable({
    destroy: true,
    aaData: response.data
});
58
Coin_op

Cette note technique La section des tables de données explique la raison de cet avertissement. Informations pertinentes à partir de là:

Cette erreur est déclenchée en passant des options à un objet constructeur DataTables lorsque l'instance DataTable du nœud sélectionné a déjà été initialisée. Par exemple:

$('#example').dataTable( {
    paging: false
} );


$('#example').dataTable( {
    searching: false
} );

La documentation ci-dessus explique deux façons de résoudre ce problème.

  1. Récupérer: il explique comment appliquer des options supplémentaires après l'initialisation (fonctionne même s'il n'est pas initialisé auparavant) en utilisant le paramètre récupérer à true comme suit:
table = $('#example').DataTable( {
    retrieve: true,
    paging: false
} );

  1. Détruire: dans ce cas, vous pouvez détruire explicitement l'objet en appelant table.destroy(); puis en créant à nouveau la table. Ou vous pouvez simplement passer l'option destroy: true Comme mentionné dans la réponse acceptée.

    table = $('#example').DataTable( {
    paging: false
} );

table.destroy();

table = $('#example').DataTable( {
    searching: false
} );

Utilisation de l'option destroy: true:

$('#example').DataTable( {
    destroy: true,
    searching: false } );

Remarque: Cette erreur peut également se produire si vous incluez votre fichier javascript qui crée le dataTable plusieurs fois. J'utilisais des tuiles Apache et je l'ai inclus dans la base ainsi que dans la définition étendue, ce qui a également entraîné cette erreur.

4
user3885927

Essayez quelque chose comme ci-dessous

    var $table=$('#example').dataTable({
                    "aaData": response.data,
                });


    $table.fnDestroy();
1
Vicky

Cela m'a aidé:

var table = $('#example').DataTable( {
    // Clear previous data
    destroy: true,
    // Load new data with AJAX from data.json file.
    ajax: "data.json" 
} );
1
Nole