web-dev-qa-db-fra.com

Comment redessiner DataTable avec de nouvelles données

J'ai déjà vérifié plusieurs questions sur ce sujet dans stackoverflow, mais elles utilisent toutes l'ancien dataTable. J'utilise DataTable. J'ai rempli mon DataTable en n'utilisant pas le côté serveur, donc les données sont préchargées (JSON) comme ceci:

datatable = $("#datatable").DataTable({
   data  : myData,
   moreoptions : moreoptions
});

Cela ne me posait pas de problème, le DataTable se chargeait parfaitement. Maintenant, je veux re-peupler cette myData avec les nouvelles données que j'ai téléchargées. Comment recharger le DataTable pour refléter les changements?

Voici ce que j'ai essayé jusqu'à présent:

$('#upload-new-data').on('click', function () {
   myData = NewlyCreatedData; // I console logged this NewlyCreatedData, and it has my uploaded data.

   datatable.draw(); // Redraw the DataTable
});

Mais ça ne marche pas. J'ai aussi essayé ceci:

datatable = $("#datatable").DataTable({
   "data"  : myData,
   "drawCallback" : function () {
      myData = NewlyCreatedData;
   },
   "moreoptions" : moreoptions,
});

Ensuite, lors du téléchargement, j'appelle simplement le déclencheur de rafraîchissement:

$('#upload-new-data').on('click', function () {
   datatable.draw(); // Redraw the DataTable
});

Cela ne fonctionne toujours pas.

jquerydatatables
41
user2881063

Vous devez d'abord vider la table, puis ajouter de nouvelles données à l'aide de la fonction row.add (). À la dernière étape, ajustez également la taille de la colonne pour que le rendu de la table soit correct.

$('#upload-new-data').on('click', function () {
   datatable.clear().draw();
   datatable.rows.add(NewlyCreatedData); // Add new data
   datatable.columns.adjust().draw(); // Redraw the DataTable
});

Aussi, si vous souhaitez trouver un mappage entre l’ancien et le nouveau des fonctions de l’API datatable signet this

54
SSA

La réponse acceptée appelle la fonction draw à deux reprises. Je ne vois pas pourquoi cela serait nécessaire. En fait, si vos nouvelles données ont les mêmes colonnes que les anciennes, vous pouvez le faire en une seule ligne:

datatable.clear().rows.add(newData).draw();
23
Skeets
datatable.rows().iterator('row', function ( context, index ) {
    var data = this.row(index).data();
    var row = $(this.row(index).node());
    data[0] = 'new data';
    datatable.row(row).data(data).draw();
});
1
vlasiliy

Une autre alternative est

dtColumns[index].visible = false/true;

Pour afficher ou masquer une colonne.

0
sankyyy