Come aggiornare manualmente la tabella dei datatables con nuovi dati JSON

Sto usando i datatables jQuery del plugin e carico i miei dati che ho caricato in DOM in fondo alla pagina e avvia il plugin in questo modo:

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

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

Adesso. dopo aver eseguito alcune azioni, voglio ottenere nuovi dati utilizzando ajax (ma non l'opzione ajax creata nei datatables - non fraintendermi!) e aggiornare la tabella con questi dati. Come posso farlo utilizzando l'API dei datatables? La documentazione è molto confusa e non riesco a trovare una soluzione. Qualsiasi aiuto sarà molto apprezzato. Grazie.

SOLUZIONE: (Avviso: questa soluzione è per la versione 1.10.4 dei datatables (al momento) non per la versione legacy).

CHIARIMENTO In base alla documentazione API (1.10.15), è possibile accedere all'API in tre modi:

1. La definizione moderna di DataTables (maiuscolo camel):

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

2. La definizione legacy di DataTables (minuscolo camel):

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

3. Utilizzando la newsintassi.

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

Quindi carica i dati in questo modo:

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

Riferimenti API:

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

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

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

Puoi usare:

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

Jsfiddle

Aggiornare. E sì, la documentazione attuale non è così buona, ma se stai bene usando le versioni precedenti puoi fare riferimento alla documentazione precedente .

È necessario distruggere la vecchia istanza della tabella dati e quindi reinizializzare la tabella dati

Prima controlla se l'istanza della tabella dati esiste utilizzando $ .fn.dataTable.isDataTable

se esiste, distruggilo e quindi crea una nuova istanza come questa

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

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

Ecco la soluzione per legacy 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);

Nel mio caso, non sto usando l'API ajax integrato per alimentare Json alla tabella (ciò è dovuto ad alcune formattazioni che erano piuttosto difficili da implementare all'interno del callback di rendering del datatable).

La mia soluzione era creare la variabile nell'ambito esterno delle funzioni di onload e la funzione che gestisce l'aggiornamento dei dati ( var table = null, ad esempio).

Quindi creo un'istanza della mia tabella nel metodo di caricamento

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

e infine, nella funzione che gestisce l'aggiornamento, invoco il metodo clear () e destroy (), prendo i dati nella tabella html e reistanzio il datatable, come tale:

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

Spero che qualcuno lo trovi utile!