web-dev-qa-db-fra.com

Impossible de réinitialiser JQuery DataTable

J'utilise des tables de données jquery pour afficher les données à l'intérieur de la grille. Sur le script de chargement de la page de démarrage, prenez DateTime.Today et traitez-les plus loin, le problème est après le chargement de la page de démarrage, lorsque j'essaie de prendre la date d'entrée des utilisateurs pour un processus supplémentaire. Je rencontre l'erreur suivante.

avertissement DataTables (table id = 'dataTable'): impossible de réinitialiser DataTable. Pour récupérer l'objet DataTables pour cette table, ne passez aucun argument ou consultez les documents pour bRetrieve et bDestroy

function getDate() {
    var date = $('input[name="myDate"]').val();
    return date;
}

$('#myDate').click(updateDate);

function updateDate() { 
    $('#dataTable').dataTable({
        "bServerSide": true,
        "sAjaxSource": "/Home/Ajax",
        "fnServerParams": function (aoData) {
            var date = getDate();
            aoData.Push({ "name": "myDate", "value": date });
        },
        //... there's more
}

updateDate();

Le script est placé en bas de la page.

javascriptjqueryjsonjquery-datatables
22
panjo

Essayez d'ajouter "bDestroy": true au littéral de l'objet options, par ex.

$('#dataTable').dataTable({
    "bServerSide": true,
    ....
    "bDestroy": true
});
53
user1565195

Je sais que c'est une VIEILLE question. Mais c'est pour toute autre personne ayant un problème similaire.

Vous devez détruire l'ancienne affectation de dataTable. Avant de créer la nouvelle table de données, utilisez le code suivant

$("#dataTable").dataTable().fnDestroy();
12
Nis

L'API DataTables a changé, mais cette erreur est toujours levée si vous essayez de réinitialiser à nouveau la table de données.

Vous pouvez vérifier s'il est déjà créé avec:

$.fn.DataTable.isDataTable("#myTable")

Et pour le détruire afin qu'il puisse être recréé à nouveau:

$('#myTable').DataTable().clear().destroy();

Ce n'est pas le moyen le plus efficace, mais cela fonctionne. Il devrait être possible de mettre à jour la table sans la détruire au préalable, en utilisant simplement clear et row.add, mais je n'ai pas trouvé de moyen de le faire lorsque la source de données est un tableau passé au constructeur.

11
Mister Smith

La première chose que vous voulez faire est de nettoyer et de détruire vos tables de données.

var tables = $.fn.dataTable.fnTables(true);

$(tables).each(function () {
  $(this).dataTable().fnClearTable();
  $(this).dataTable().fnDestroy();
});

puis recréer.

$("#datagrid").dataTable();
3
João

vérifiez si dans votre code il y a un appel dupliqué à la table de données. Si vous initialisez accidentellement votre table plusieurs fois, il renvoie exactement cette erreur

1
Edoardo

Cela a fonctionné pour moi var table = $ ('# table1'). DataTable ({destroy: true, responsive: true, .....});

0
erax

La nouvelle API Datatables a une fonction de rechargement qui récupérera les données de la source ajax sans vous obliger à détruire la table au préalable. Lorsque j'ai une table avec un grand nombre de lignes (5000+), la destruction prend plus de temps que la charge initiale, plus la case "traitement" n'apparaît pas lors de la destruction, mais un rechargement est assez rapide et affiche correctement le "traitement" "boîte quand ça marche.

Voici une version mise à jour du code dans la question qui utilise la nouvelle API pour obtenir l'effet souhaité:

function getDate() {
  var date = $('input[name="myDate"]').val();
  return date;
}

$('#myDate').click(updateDate);

// Use .DataTable instead of .dataTable
// It returns a different object that has the ajax attribute on it.
var myDataTable = $('#dataTable').DataTable({
  "bServerSide": true,
  "sAjaxSource": "/Home/Ajax",
  "fnServerParams": function (aoData) {
    var date = getDate();
    aoData.Push({ "name": "myDate", "value": date });
  },
  //... there's more

function updateDate() { 
  myDataTable.ajax.reload();
}

La seule modification que j'ai apportée consiste à utiliser .DataTable Au lieu de .dataTable Et à conserver une référence à la valeur de retour myDataTable afin qu'elle puisse être utilisée pour appeler la fonction .ajax.reload().

0
Tim Gautier