Wie lade / aktualisiere ich jQuery dataTable neu?

Ich versuche, Funktionen zu implementieren, bei denen durch Klicken auf eine Schaltfläche auf dem Bildschirm meine jQuery-Datentabelle aktualisiert wird (da sich die serverseitige Datenquelle möglicherweise seit der Erstellung der Datentabelle geändert hat).

Folgendes habe ich:

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

Aber wenn ich das mache, macht es nichts. Wie kann die Datentabelle beim Klicken auf die Schaltfläche ordnungsgemäß aktualisiert werden? Danke im Voraus!

Sie können Folgendes versuchen:

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

Mit der Version 1.10.0 von DataTables ist es integriert und einfach:

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

oder nur

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

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

Sie können eine umfangreiche API von DataTable verwenden, um es neu zu laden ajax.reload()

Wenn Sie Ihre Datentabelle als DataTable()(neue Version) deklarieren , benötigen Sie:

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

Wenn Sie Ihre Datentabelle als dataTable()(alte Version) deklarieren , benötigen Sie:

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

Zerstören Sie zuerst die Datentabelle und zeichnen Sie dann die Datentabelle.

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

Ich hatte das gleiche Problem, so habe ich es behoben:

Holen Sie sich zuerst die Daten mit einer Methode Ihrer Wahl. Ich verwende Ajax, nachdem ich Ergebnisse übermittelt habe, die Änderungen an der Tabelle vornehmen. Dann löschen und neue Daten hinzufügen:

var refreshedDataFromTheServer = getDataFromServer();

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

Hier ist die Quelle: https://datatables.net/reference/api/clear ()

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

Wenn Sie DataTables 1.10 eine Schaltfläche zum erneuten Laden / Aktualisieren hinzufügen möchten, verwenden Sie drawCallback .

Siehe Beispiel unten (ich verwende DataTables mit 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();
}

Diese einfache Antwort hat bei mir funktioniert

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

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

Ich würde empfehlen, den folgenden Code zu verwenden.

table.ajax.reload(null, false); 

Der Grund dafür ist, dass das Paging von Benutzern beim erneuten Laden nicht zurückgesetzt wird.
Beispiel:

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

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

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

   });
</script>

Details dazu finden Sie hier

So mache ich das ... Vielleicht nicht der beste Weg, aber es ist definitiv einfacher (IMHO) und erfordert keine zusätzlichen Plugins.

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

Hinweis: In meiner Arbeit mit jQuery dataTable funktioniert es manchmal nicht, wenn Sie es nicht haben <thead></thead><tbody></tbody>. Aber vielleicht kommen Sie ohne aus. Ich habe nicht genau herausgefunden, was es erforderlich macht und was nicht.

Versuchen Sie zuerst, datatable zu zerstören und dann erneut einzurichten

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

Wenn Sie das URL-Attribut verwenden, tun Sie es einfach

table.ajax.reload()

Hoffe es hilft jemandem

Verwenden Sie diesen Code, wenn Sie Ihre Datentabelle aktualisieren möchten:

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

Nun, Sie haben nicht gezeigt, wie / wo Sie die Skripte laden, aber um die Plug-in-API-Funktionen zu verwenden, müssen Sie sie in Ihre Seite aufnehmen, nachdem Sie die DataTables-Bibliothek geladen haben, aber bevor Sie die DataTable initialisieren.

so was

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

Allan Jardines DataTables ist ein sehr leistungsfähiges und schickes jQuery-Plugin zum Anzeigen von Tabellendaten. Es hat viele Funktionen und kann das meiste tun, was Sie wollen. Eine Sache, die seltsamerweise schwierig ist, ist, wie man den Inhalt auf einfache Weise aktualisiert. Daher habe ich zu meiner eigenen Referenz und möglicherweise auch zum Nutzen anderer hier ein vollständiges Beispiel für einen Weg, wenn Sie dies tun:

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

Quelle

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

Dies funktionierte bei mir ohne 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++){
            //

.......}

Laut der DataTable- Hilfe konnte ich das für meinen Tisch tun.

Ich möchte mehrere Datenbanken in meine DataTable aufnehmen.

Beispiel: data_1.json> 2500 Datensätze - data_2.json> 300 Datensätze - data_3.json> 10265 Datensätze

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

Wenn Sie datatable v1.10.12 verwenden, rufen Sie einfach die .draw()Methode auf und übergeben Sie die erforderlichen Zeichnungstypen. Das heißt full-reset, pageSie zeichnen Ihre dt mit neuen Daten neu

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

// mache eine Aktion

dt.draw('full-reset')

Weitere Informationen finden Sie in den datierbaren Dokumenten

Ich hatte etwas getan, das sich darauf bezieht ... Unten finden Sie ein Beispiel für Javascript mit dem, was Sie brauchen. Hier gibt es eine Demo dazu: 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');
    }
}

Sie müssen diese Codezeile nach dem Aktualisierungsvorgang schreiben.

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

Für meinen Fall (DataTables 1.10.7) funktioniert der folgende Code für mich;

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

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

Datatables clear (): Entfernen Sie einfach alle Datenzeilen aus der Tabelle

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

    setInterval('autoRefresh()', 5000); 

Dateninitialisierung mit init neu initialisieren und Schreiben als wahr abrufen ..done..so einfach

z.B.

TableAjax.init();
retrieve: true,