web-dev-qa-db-fra.com

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

J'utilise le plugin jQuery datatables et charge mes données que j'ai chargées dans le DOM au bas de la 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' }
    ]
});

À présent. Après avoir effectué une action, je souhaite obtenir de nouvelles données en utilisant ajax (mais pas l'option ajax intégrée dans datatables - 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.

jquerydatatablesjquery-datatables
72
covfefe

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 utilisez les anciennes versions, vous pouvez vous référer à documentation existante .

24
Vladimirs

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

Ma solution consistait à 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 = null, par exemple).

Puis j'instancie ma table dans la méthode de chargement

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

et enfin, dans la fonction qui gère l'actualisation, j'appelle les méthodes clear () et destroy (), récupère les données dans la table html et ré-instancie le datatable, comme tel:

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

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

4
jorge cordero

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

Vérifiez tout 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
    });
1
Om Sharma

Voici la solution pour hériter des données 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);
0
Vikas