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

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.

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 ()

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 .

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
    });

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);

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!