¿Cómo recargar / actualizar jQuery dataTable?

Estoy tratando de implementar una funcionalidad mediante la cual hacer clic en un botón en la pantalla hará que mi tabla de datos jQuery se actualice (ya que la fuente de datos del lado del servidor puede haber cambiado desde que se creó la tabla de datos).

Esto es lo que tengo:

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

Pero cuando ejecuto esto, no hace nada. ¿Cuál es la forma correcta de actualizar la tabla de datos cuando se hace clic en el botón? ¡Gracias por adelantado!

Puedes probar lo siguiente:

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 versión 1.10.0 de DataTables, está integrado y es fácil:

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

o solo

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

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

Puede usar una API extensa de DataTable para recargarlo por ajax.reload()

Si declara su tabla de datos como DataTable()(nueva versión), necesita:

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

Si declara su tabla de datos como dataTable()(versión antigua), necesita:

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

Primero destruya la tabla de datos y luego dibuje la tabla de datos.

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

Tuve el mismo problema, así es como lo solucioné:

Primero obtenga los datos con el método de su elección, uso ajax después de enviar los resultados que harán cambios en la tabla. Luego, borre y agregue datos nuevos:

var refreshedDataFromTheServer = getDataFromServer();

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

aquí está la fuente: https://datatables.net/reference/api/clear ()

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

Si desea agregar un botón de recarga / actualización a DataTables 1.10, use drawCallback .

Vea el ejemplo a continuación (estoy 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();
}

Esta simple respuesta funcionó para mí

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

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

Recomendaría usar el siguiente código.

table.ajax.reload(null, false); 

La razón de esto, la paginación del usuario no se restablecerá al recargar.
Ejemplo:

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

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

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

   });
</script>

detalles sobre esto se pueden encontrar aquí

Así es como lo hago ... Quizás no sea la mejor manera, pero definitivamente es más simple (en mi humilde opinión) y no requiere ningún complemento adicional.

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: En mi trabajo con jQuery dataTable, a veces, si no lo tiene <thead></thead><tbody></tbody>, no funciona. Pero es posible que pueda arreglárselas sin él. No he descubierto exactamente qué lo hace necesario y qué no.

Intente destruir la tabla de datos primero y luego vuelva a configurarla, ejemplo

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

Si usa el atributo url, simplemente haga

table.ajax.reload()

Espera que ayude a alguien

Utilice este código cuando desee actualizar su tabla de datos:

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

bueno, no mostró cómo / dónde está cargando los scripts, pero para usar las funciones de la API del complemento, debe incluirlo en su página después de cargar la biblioteca DataTables pero antes de inicializar el DataTable.

Me gusta esto

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

DataTables de Allan Jardine es un complemento jQuery muy poderoso y elegante para mostrar datos tabulares. Tiene muchas funciones y puede hacer la mayor parte de lo que desee. Sin embargo, una cosa que es curiosamente difícil es cómo actualizar el contenido de una manera simple, por lo que para mi propia referencia, y posiblemente también para el beneficio de otros, aquí hay un ejemplo completo de una forma de hacerlo:

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

Fuente

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

Esto funcionó para mí sin usar 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++){
            //

.......}

De acuerdo con la ayuda de DataTable , podría hacerlo para mi mesa.

Quiero múltiples bases de datos para mi DataTable.

Por ejemplo: data_1.json> 2500 registros - data_2.json> 300 registros - data_3.json> 10265 registros

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

si usa la tabla de datos v1.10.12, simplemente llame al .draw()método y pase los tipos de dibujo requeridos full-reset, es decir , pagevolverá a dibujar su dt con nuevos datos

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

// hacer alguna acción

dt.draw('full-reset')

para obtener más información, consulte los documentos de tabla de datos

Había hecho algo que se relaciona con esto ... A continuación se muestra un javascript de muestra con lo que necesita. Hay una demostración sobre esto aquí: 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');
    }
}

tienes que escribir esta línea de código después de realizar la operación de actualización.

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

Para mi caso (DataTables 1.10.7) el siguiente código funciona para mí;

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

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

Tablas de datos clear (): simplemente elimine todas las filas de datos de la tabla

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

    setInterval('autoRefresh()', 5000); 

reinicializar la tabla de datos con init y escribir recuperar como verdadero .. hecho .. tan simple

p.ej.

TableAjax.init();
retrieve: true,