Comment mettre à jour manuellement la table des tables de données avec de nouvelles données JSON

99

J'utilise le plugin jQuery datatables et charge mes données que j'ai chargées dans le DOM en bas de page et lance le plugin de cette manière:

var myData = [
    {
        "id": 1,
        "first_name": "John",
        "last_name": "Doe"
    }
];

$('#table').dataTable({
    data: myData
        columns: [
        { data: 'id' },
        { data: 'first_name' },
        { data: 'last_name' }
    ]
});

Maintenant. après avoir effectué une action, je veux obtenir de nouvelles données en utilisant ajax (mais pas l'option ajax intégrée dans les tables de données - ne vous méprenez pas!) et mettre à jour la table avec ces données. Comment puis-je faire cela en utilisant l'API Datatables? La documentation est très déroutante et je ne trouve pas de solution. Toute aide sera très appréciée. Merci.

Indy
la source
Que diriez-vous de supprimer le corps de table existant et de le créer nouveau?
Reporter le

Réponses:

178

SOLUTION: (Remarque: cette solution est pour les tables de données version 1.10.4 (pour le moment) et non pour la version héritée).

CLARIFICATION Selon la documentation de l' API (1.10.15), l'API est accessible de trois manières:

  1. La définition moderne de DataTables (cas supérieur de chameau):

    var datatable = $( selector ).DataTable();

  2. La définition héritée de DataTables (cas du chameau inférieur):

    var datatable = $( selector ).dataTable().api();

  3. En utilisant la newsyntaxe.

    var datatable = new $.fn.dataTable.Api( selector );

Ensuite, chargez les données comme ceci:

$.get('myUrl', function(newDataArray) {
    datatable.clear();
    datatable.rows.add(newDataArray);
    datatable.draw();
});

Utilisez draw(false)pour rester sur la même page après la mise à jour des données.

Références API:

https://datatables.net/reference/api/clear ()

https://datatables.net/reference/api/rows.add ()

https://datatables.net/reference/api/draw ()

Indy
la source
4
C'était trop difficile à trouver, merci beaucoup! Utiliser ceci pour conserver la table de données entre les allers-retours du serveur.
Doug
Qu'en est-il de la version 1.9.4 des tables de données? Je suis confronté au même problème
Hardik Masalawala
5
Je veux juste ajouter que vous pouvez également enchaîner les méthodes (ie datatable.clear().rows.add(newDataArray).draw()). À partir de ce commentaire, j'utilise la version 1.10.18
Sal_Vader_808
comment puis-je ajouter une colonne avec le contrôle de bouton
ajinkya
31

Vous pouvez utiliser:

$('#table').dataTable().fnClearTable();
$('#table').dataTable().fnAddData(myData2);

Jsfiddle

Mettre à jour. Et oui, la documentation actuelle n'est pas très bonne, mais si vous êtes d'accord avec les anciennes versions, vous pouvez vous référer à la documentation héritée .

Vladimirs
la source
Oui, vous avez raison, mais j'utilise la dernière version des tables de données. Quoi qu'il en soit, j'ai trouvé une solution et mis à jour ma question. Merci pour votre intérêt :)
Indy
1
@CookieMan, veuillez supprimer votre modification et la publier comme réponse. Après cela, marquez-le comme accepté.
Reporter le
cette solution ne met pas à jour la section de pagination
Alok Deshwal
C'est bien. Merci
Chris
8

Vous devez détruire l'ancienne instance de la table de données, puis réinitialiser la table de données

Vérifiez d'abord si une instance de table de données existe en utilisant $ .fn.dataTable.isDataTable

s'il existe, détruisez-le puis créez une nouvelle instance comme celle-ci

    if ($.fn.dataTable.isDataTable('#dataTableExample')) {
        $('#dataTableExample').DataTable().destroy();
    }

    $('#dataTableExample').DataTable({
        responsive: true,
        destroy: true
    });
Om Sharma
la source
5

Voici la solution pour les anciens datatable 1.9.4

    var myData = [
      {
        "id": 1,
        "first_name": "Andy",
        "last_name": "Anderson"
      }
   ];
    var myData2 = [
      {
        "id": 2,
        "first_name": "Bob",
        "last_name": "Benson"
      }
    ];

  $('#table').dataTable({
  //  data: myData,
       aoColumns: [
         { mData: 'id' },
         { mData: 'first_name' },
         { mData: 'last_name' }
      ]
  });

 $('#table').dataTable().fnClearTable();
 $('#table').dataTable().fnAddData(myData2);
Vikas
la source
Cela fonctionne pour la version récente (veuillez considérer la date du commentaire). Merci Vikas!
Telmo
Cela a fonctionné pour moi. Mais je ne comprends pas pourquoi je peux utiliser tous ces exemples: var datatable = $ (selector) .DataTable (); var datatable = $ (sélecteur) .dataTable (). api (); var datatable = new $ .fn.dataTable.Api (sélecteur); Mais lors de l'ajout de .row (). Add () ne fonctionne pas.
Fernando Palma le
4

Dans mon cas, je n'utilise pas l'api ajax intégrée pour alimenter Json dans la table (cela est dû à un formatage plutôt difficile à implémenter dans le rappel de rendu de la table de données).

Ma solution a été de créer la variable dans la portée externe des fonctions onload et la fonction qui gère l'actualisation des données ( var table = nullpar exemple).

Ensuite, j'instancie ma table dans la méthode au chargement

$(function () {
            //.... some code here
            table = $("#detailReportTable").DataTable();
            .... more code here
        });

et enfin, dans la fonction qui gère l'actualisation, j'appelle la méthode clear () et destroy (), récupère les données dans la table html et ré-instancie la table de données, en tant que telle:

function getOrderDetail() {
            table.clear();
            table.destroy();
            ...
            $.ajax({
             //.....api call here
            });
            ....
            table = $("#detailReportTable").DataTable();
   }

J'espère que quelqu'un trouvera cela utile!

jorge cordero
la source
2
Détruire toute la table à chaque aller-retour coûte assez cher et l'état est également perdu. Vous devriez considérer la réponse acceptée où l'état de la table est conservé.
nhaberl