Come ricaricare / aggiornare jQuery dataTable?

Sto cercando di implementare la funzionalità in base alla quale facendo clic su un pulsante sullo schermo, il mio jQuery dataTable si aggiorna (poiché l'origine dati lato server potrebbe essere cambiata da quando è stato creato il dataTable).

Ecco cosa ho:

$(document).ready(function() {
    $("#my-button").click(function() {
        $("#my-datatable").dataTable().fnReloadAjax();
    });
});

Ma quando lo eseguo, non fa nulla. Qual è il modo corretto per aggiornare dataTable quando si fa clic sul pulsante? Grazie in anticipo!

Puoi provare quanto segue:

function InitOverviewDataTable() {
    oOverviewTable = $('#HelpdeskOverview').dataTable({
        "bPaginate": true,
        "bJQueryUI": true, // ThemeRoller-stöd
        "bLengthChange": false,
        "bFilter": false,
        "bSort": false,
        "bInfo": true,
        "bAutoWidth": true,
        "bProcessing": true,
        "iDisplayLength": 10,
        "sAjaxSource": '/Helpdesk/ActiveCases/noacceptancetest'
    });
}

function RefreshTable(tableId, urlData) {
    $.getJSON(urlData, null, function(json) {
        table = $(tableId).dataTable();
        oSettings = table.fnSettings();

        table.fnClearTable(this);

        for (var i = 0; i < json.aaData.length; i++) {
            table.oApi._fnAddData(oSettings, json.aaData[i]);
        }

        oSettings.aiDisplay = oSettings.aiDisplayMaster.slice();
        table.fnDraw();
    });
}
// Edited by Prasad
function AutoReload() {
    RefreshTable('#HelpdeskOverview', '/Helpdesk/ActiveCases/noacceptancetest');

    setTimeout(function() {
        AutoReload();
    }, 30000);
}

$(document).ready(function() {
    InitOverviewDataTable();
    setTimeout(function() {
        AutoReload();
    }, 30000);
});

http://www.meadow.se/wordpress/?p=536

Con la versione 1.10.0 di DataTables, è integrato e facile:

var table = $('#example').DataTable();
table.ajax.reload();

o semplicemente

$('#example').DataTable().ajax.reload();

http://datatables.net/reference/api/ajax.reload ()

Distruggi prima il datatable e poi disegna il datatable.

$('#table1').DataTable().destroy();
$('#table1').find('tbody').append("<tr><td><value1></td><td><value1></td></tr>");
$('#table1').DataTable().draw();

È possibile utilizzare un'ampia API di DataTable per ricaricarlo ajax.reload()

Se dichiari la tua databile come DataTable()(nuova versione) hai bisogno di:

var oTable = $('#filtertable_data').DataTable( );
// to reload
oTable.ajax.reload();

Se dichiari la tua databile come dataTable()(vecchia versione) hai bisogno di:

var oTable = $('#filtertable_data').dataTable( );
// to reload
oTable.api().ajax.reload();

Ho avuto lo stesso problema, ecco come l'ho risolto:

per prima cosa prendi i dati con il metodo che preferisci, io uso ajax dopo aver inviato i risultati che apporteranno modifiche alla tabella. Quindi cancella e aggiungi nuovi dati:

var refreshedDataFromTheServer = getDataFromServer();

var myTable = $('#tableId').DataTable();
myTable.clear().rows.add(refreshedDataFromTheServer).draw();

ecco la fonte: https://datatables.net/reference/api/clear ()

Questa semplice risposta ha funzionato per me

                  $('#my-datatable').DataTable().ajax.reload();

rif https://datatables.net/forums/discussion/38969/reload-refresh-table-after-event

var ref = $('#example').DataTable();
ref.ajax.reload();

Se vuoi aggiungere un pulsante di ricarica / aggiornamento a DataTables 1.10, usa drawCallback .

Vedi l'esempio qui sotto (sto usando DataTables con bootstrap css)

var ref= $('#hldy_tbl').DataTable({
        "responsive": true,
        "processing":true,
        "serverSide":true,
        "ajax":{
            "url":"get_hotels.php",
            "type":"POST"
        },
        "drawCallback": function( settings ) {
            $('<li><a onclick="refresh_tab()" class="fa fa-refresh"></a></li>').prependTo('div.dataTables_paginate ul.pagination');
        }
    });

function refresh_tab(){
    ref.ajax.reload();
}

consiglierei di utilizzare il seguente codice.

table.ajax.reload(null, false); 

La ragione di ciò, la paginazione dell'utente non verrà reimpostata al ricaricamento.
Esempio:

<button id='refresh'> Refresh </button>

<script>
    $(document).ready(function() {

        table = $("#my-datatable").DataTable();
        $("#refresh").on("click", function () { 
         table.ajax.reload(null, false); 
        });

   });
</script>

dettagli su questo possono essere trovati qui

È così che lo faccio ... Forse non è il modo migliore, ma è decisamente più semplice (IMHO) e non richiede plug-in aggiuntivi.

HTML

<div id="my-datatable"></div>

jQuery

function LoadData() {
    var myDataTable = $("#my-datatable").html("<table><thead></thead><tbody></tbody></table>");
    $("table",myDataTable).dataTable({...});
}
$(document).ready(function() {
    $("#my-button").click(LoadData);
    LoadData();
});

Nota: nel mio lavoro con jQuery dataTable, a volte se non ce l'hai <thead></thead><tbody></tbody>non funziona. Ma potresti riuscire a cavartela senza. Non ho capito esattamente cosa lo renda necessario e cosa no.

Prova prima a distruggere datatable e poi a configurarlo di nuovo, esempio

var table;
$(document).ready(function() {
    table = $("#my-datatable").datatable()
    $("#my-button").click(function() {
        table.fnDestroy();
        table = $("#my-datatable").dataTable();
    });
});

Se usi l'attributo url, fallo

table.ajax.reload()

Spera che aiuti qualcuno

Usa questo codice, quando vuoi aggiornare il tuo datatable:

 $("#my-button").click(function() {
    $('#my-datatable').DataTable().clear().draw();
 });

beh, non hai mostrato come / dove stai caricando gli script, ma per usare le funzioni API del plug-in, devi includerlo nella tua pagina dopo aver caricato la libreria DataTables ma prima di inizializzare DataTable.

come questo

<script type="text/javascript" src="jquery.dataTables.js"></script>
<script type="text/javascript" src="dataTables.fnReloadAjax.js"></script>

DataTables di Allan Jardine è un plugin jQuery molto potente e intelligente per la visualizzazione di dati tabulari. Ha molte funzionalità e può fare la maggior parte di ciò che potresti desiderare. Una cosa che è curiosamente difficile, però, è come aggiornare i contenuti in modo semplice, quindi io per mio riferimento, e forse anche per il beneficio di altri, ecco un esempio completo di un modo se lo faccio:

HTML

<table id="HelpdeskOverview">
  <thead>
    <tr>
      <th>Ärende</th>
      <th>Rapporterad</th>
      <th>Syst/Utr/Appl</th>
      <th>Prio</th>
      <th>Rubrik</th>
      <th>Status</th>
      <th>Ägare</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

Javascript

function InitOverviewDataTable()
{
  oOverviewTable =$('#HelpdeskOverview').dataTable(
  {
    "bPaginate": true,
    "bJQueryUI": true,  // ThemeRoller-stöd
    "bLengthChange": false,
    "bFilter": false,
    "bSort": false,
    "bInfo": true,
    "bAutoWidth": true,
    "bProcessing": true,
    "iDisplayLength": 10,
    "sAjaxSource": '/Helpdesk/ActiveCases/noacceptancetest'
  });
}

function RefreshTable(tableId, urlData)
{
  $.getJSON(urlData, null, function( json )
  {
    table = $(tableId).dataTable();
    oSettings = table.fnSettings();

    table.fnClearTable(this);

    for (var i=0; i<json.aaData.length; i++)
    {
      table.oApi._fnAddData(oSettings, json.aaData[i]);
    }

    oSettings.aiDisplay = oSettings.aiDisplayMaster.slice();
    table.fnDraw();
  });
}

function AutoReload()
{
  RefreshTable('#HelpdeskOverview', '/Helpdesk/ActiveCases/noacceptancetest');

  setTimeout(function(){AutoReload();}, 30000);
}

$(document).ready(function () {
  InitOverviewDataTable();
  setTimeout(function(){AutoReload();}, 30000);
});

fonte

var myTable = $ ('# tblIdName'). DataTable (); myTable.clear (). rows.add (myTable.data) .draw ();

Questo ha funzionato per me senza usare ajax.

        if(data.length==0){
            alert("empty");
              $('#MembershipTable > tbody').empty();
            // $('#MembershipTable').dataTable().fnDestroy();
                    $('#MembershipTable_info').empty(); 
                    $("#MembershipTable_length").empty();
                    $("#MembershipTable_paginate").empty();

             html="<tr><td colspan='20'><b>No data available in Table</b> </td></tr>";
           $("#MembershipTable").append(html);
        }

        else{
             $('#MembershipTable').dataTable().fnDestroy();
            $('#MembershipTable > tbody').empty();

         for(var i=0; i<data.length; i++){
            //

.......}

Secondo la guida di DataTable , potrei farlo per la mia tabella.

Desidero più database nel mio DataTable.

Ad esempio: data_1.json> 2500 record - data_2.json> 300 record - data_3.json> 10265 record

var table;
var isTableCreated= false;

if (isTableCreated==true) {
    table.destroy();
    $('#Table').empty(); // empty in case the columns change
}
else
    i++;

table = $('#Table').DataTable({
        "processing": true,
        "serverSide": true,
        "ordering": false,
        "searching": false,
        "ajax": {
            "url": 'url',
            "type": "POST",
            "draw": 1,
            "data": function (data) {
                data.pageNumber = (data.start / data.length);
            },
            "dataFilter": function (data) {
                return JSON.stringify(data);
            },
            "dataSrc": function (data) {
                if (data.length > 0) {
                    data.recordsTotal = data[0].result_count;
                    data.recordsFiltered = data[0].result_count;
                    return data;
                }
                else
                    return "";
            },

            "error": function (xhr, error, thrown) {
                alert(thrown.message)
            }
        },
        columns: [
           { data: 'column_1' },
           { data: 'column_2' },
           { data: 'column_3' },
           { data: 'column_4' },
           { data: 'column_5' }
        ]
    });

se si utilizza v1.10.12 DataTable allora semplicemente chiamando .draw()il metodo e passando i tipi di disegnare il termine cioè full-reset, pageallora si sarà ri-attirare la vostra dt con nuovi dati

let dt = $("#my-datatable").datatable()

// esegui un'azione

dt.draw('full-reset')

per ulteriori informazioni sui documenti databili

Avevo fatto qualcosa che riguarda questo ... Di seguito è riportato un esempio di javascript con ciò di cui hai bisogno. C'è una demo su questo qui: http://codersfolder.com/2016/07/crud-with-php-mysqli-bootstrap-datatables-jquery-plugin/

//global the manage member table 
var manageMemberTable;

function updateMember(id = null) {
    if(id) {
        // click on update button
        $("#updatebutton").unbind('click').bind('click', function() {
            $.ajax({
                url: 'webdesign_action/update.php',
                type: 'post',
                data: {member_id : id},
                dataType: 'json',
                success:function(response) {
                    if(response.success == true) {                      
                        $(".removeMessages").html('<div class="alert alert-success alert-dismissible" role="alert">'+
                              '<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>'+
                              '<strong> <span class="glyphicon glyphicon-ok-sign"></span> </strong>'+response.messages+
                            '</div>');

                        // refresh the table

                        manageMemberTable.ajax.reload();

                        // close the modal
                        $("#updateModal").modal('hide');

                    } else {
                        $(".removeMessages").html('<div class="alert alert-warning alert-dismissible" role="alert">'+
                              '<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>'+
                              '<strong> <span class="glyphicon glyphicon-exclamation-sign"></span> </strong>'+response.messages+
                            '</div>');

                        // refresh the table                        
                        manageMemberTable.ajax.reload();

                        // close the modal
                        $("#updateModal").modal('hide');
                    }
                }
            });
        }); // click remove btn
    } else {
        alert('Error: Refresh the page again');
    }
}

è necessario scrivere questa riga di codice dopo aver eseguito l'operazione di aggiornamento.

$('#example').DataTable().ajax.reload();

Per il mio caso (DataTables 1.10.7) il seguente codice funziona per me;

let table = $(tableName).DataTable();
table.clear().draw();

$(tableName).dataTable({ ... });

Datatables clear (): rimuovi semplicemente tutte le righe di dati dalla tabella

    function autoRefresh(){
        table.ajax.reload(null,false); 
        alert('Refresh');//for test, uncomment
    }

    setInterval('autoRefresh()', 5000); 

reinizializza datatable con init e scrivi recupera come true ..fatto..così semplice

per esempio.

TableAjax.init();
retrieve: true,