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

Je suis en utilisant le plugin jQuery datatables et charger mes données que j'ai chargé dans les DOM au bas de la page, et initie le plugin de cette façon:

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 l'exécution de l'action je veux obtenir de nouvelles données à l'aide d'ajax (mais pas ajax option de construire dans les tables de données - ne vous méprenez pas!) et mise à jour de la table avec ces données. Comment puis-je le faire à l'aide de tables de données de l'API? La documentation est très confus et je ne peux pas trouver une solution. Toute aide sera très appréciée. Merci.

  • Comment à propos de la suppression de l'existant tablebody et de créer de nouvelles?
InformationsquelleAutor covfefe | 2015-01-05
  1. 143

    SOLUTION: (Avis: cette solution est pour les tables de données de la version 1.10.4 (pour le moment) pas d'ancienne version).

    CLARIFICATION Par la La documentation de l'API (1.10.15), de l'API peut être accessible de trois façons:

    1. La définition moderne de tables de données (en haut à dos de chameau cas):

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

    2. L'héritage définition des tables de données (en bas à dos de chameau cas):

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

    3. À l'aide de la new syntaxe.

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

    Puis charger les données comme suit: 

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

    Références API:

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

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

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

    • C'était trop dur à trouver, merci beaucoup! L'utilisation de ce persister la table de données entre le serveur d'allers-retours.
    • Qu'en est datatables version 1.9.4 je suis face à un même problème
    • Je tiens juste à ajouter que vous pouvez également la chaîne des méthodes (c'est à dire datatable.clear().rows.add(newDataArray).draw()). Comme de ce commentaire, je suis l'aide de la version 1.10.18
    InformationsquelleAutor covfefe
  2. 26

    Vous pouvez utiliser:

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

    Jsfiddle

    Mise à jour. Et oui la documentation n'est pas très bon, mais si vous êtes d'accord avec d'anciennes versions, vous pouvez consulter l'héritage de la documentation.

    • Oui, vous avez raison, mais je suis en utilisant la dernière version de tables de données. De toute façon, j'ai trouvé une solution et mise à jour de ma question. Merci pour votre intérêt 🙂
    • veuillez modifier et supprimer votre post comme une réponse. Après cela, le marquer comme acceptée.
    • cette solution n'est pas la mise à jour de la pagination de l'article
    InformationsquelleAutor Vladimirs
  3. 5

    Vous devrez détruire une vieille table de données d'instance et puis re-initialiser la table de données

    Vérifiez d'abord si les données de la table existe par exemple à l'aide de $.fn.dataTable.isDataTable

    s'il existe ensuite à le détruire, et puis créer une nouvelle instance comme ce 

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

    $('#dataTableExample').DataTable({
        responsive: true,
        destroy: true
    });
    InformationsquelleAutor Om Sharma
  4. 4

    Dans mon cas, je ne suis pas en utilisant l'api ajax de flux Json de la table (ce qui est dû à une certaine mise en forme qui a été plutôt difficile à mettre en œuvre à l'intérieur de la datatable rendu de rappel).

    Ma solution a été de créer la variable à l'extérieur de la portée de la onload fonctions et la fonction qui gère l'actualisation des données (var table = null, par exemple).

    Puis j'instancie ma table dans la méthode load

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

    et enfin, dans la fonction qui gère l'actualiser, j'invoque le clear() et destroy() la méthode, de récupérer les données dans le code html de la table, et ré-instancier la datatable, en tant que tel:

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

    J'espère que quelqu'un trouve cette pratique!

    • Détruire l'ensemble de la table à chaque aller-retour est plutôt cher et de l'etat est également perdu. Vous devriez envisager de la accepté de répondre lorsque l'état de la table est conservé.
    InformationsquelleAutor jorge cordero
  5. 2

    Ici est solution de l'héritage pour la 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);
    • Cela fonctionne pour la version récente (s'il vous plaît, considérez la date de l'observation). Merci Vikas!
    InformationsquelleAutor Vikas