webentwicklung-frage-antwort-db.com.de

Datatables nach Verwendung von ajax neu zeichnen, um den Tabelleninhalt zu aktualisieren?

Ich verwende Datatables und habe auf der Seite eine Schaltfläche, die die Tabelle mit AJAX aktualisiert. Um klar zu sein, dass die Tabelle keine ajax-Datenquelle verwendet, verwenden wir ajax nur, um sie nur bei Bedarf zu aktualisieren. Ajax erfrischt das div, in das die Tabelle eingebunden ist. Ich weiß, dass ich die Seitenknöpfe und Filterfunktionen verliere, da die Tabelle neu gezeichnet werden muss.

Datatables-Code

var oTable6;
$(document).ready(function() {
    oTable6 = $('#rankings').dataTable( {
        "sDom":'t<"bottom"filp><"clear">',
        "bAutoWidth": false,
        "sPaginationType": "full_numbers",
        "aoColumns": [ 
            { "bSortable": false, "sWidth": "10px" },
            null,
            null,
            null,
            null,
            null,
            null,
            null,
            null,
            null,
            null,
            null
        ]

    });
});

Der Ajax-Code ist dies

$("#ajaxchange").click(function(){
    var campaign_id = $("#campaigns_id").val();
    var fromDate = $("#from").val();
    var toDate = $("#to").val();

    var url = 'http://domain.com/account/campaign/ajaxrefreshgrid?format=html';
    $.post(url, { campaignId: campaign_id, fromdate: fromDate, todate: toDate},
        function( data ) { 
            $("#ajaxresponse").html(data);
        });
});

Ich habe es versucht, aber es hat nicht funktioniert

"fnDrawCallback": function() {
    function( data ) { 
        $("#ajaxresponse").html(data);
    };
},
25
Anagio

Es sieht so aus, als könnten Sie die API-Funktionen dazu nutzen

  • tabelle löschen (fnClearTable)
  • füge neue Daten zur Tabelle hinzu (fnAddData)
  • die Tabelle neu zeichnen (fnDraw)

http://datatables.net/api

UPDATE

Ich denke, Sie verwenden die DOM-Datenquelle (für serverseitige Verarbeitung), um Ihre Tabelle zu generieren. Das habe ich anfangs nicht wirklich verstanden, daher funktioniert meine vorherige Antwort nicht.

Damit es funktioniert, ohne dass Sie Ihren serverseitigen Code erneut schreiben müssen:

Was Sie tun müssen, ist, die alte Tabelle (in der dom) vollständig zu entfernen und durch den Inhalt des Ajax-Ergebnisses zu ersetzen und die Datentabelle dann erneut zu initialisieren:

// in your $.post callback:

function (data) {

    // remove the old table
    $("#ajaxresponse").children().remove();

    // replace with the new table
    $("#ajaxresponse").html(data);

    // reinitialize the datatable
    $('#rankings').dataTable( {
    "sDom":'t<"bottom"filp><"clear">',
    "bAutoWidth": false,
    "sPaginationType": "full_numbers",
        "aoColumns": [ 
        { "bSortable": false, "sWidth": "10px" },
        null,
        null,
        null,
        null,
        null,
        null,
        null,
        null,
        null,
        null,
        null
        ]

    } 
    );
}
26
swatkins

Versuchen Sie, die Datentabelle mit bDestroy zu zerstören: true wie folgt:

$("#ajaxchange").click(function(){
    var campaign_id = $("#campaigns_id").val();
    var fromDate = $("#from").val();
    var toDate = $("#to").val();

    var url = 'http://domain.com/account/campaign/ajaxrefreshgrid?format=html';
    $.post(url, { campaignId: campaign_id, fromdate: fromDate, todate: toDate},
            function( data ) { 

                $("#ajaxresponse").html(data);

                oTable6 = $('#rankings').dataTable( {"bDestroy":true,
                    "sDom":'t<"bottom"filp><"clear">',
                    "bAutoWidth": false,
                    "sPaginationType": "full_numbers",
"aoColumns": [ 
        { "bSortable": false, "sWidth": "10px" },
        null,
        null,
        null,
        null,
        null,
        null,
        null,
        null,
        null,
        null,
        null
        ]

} 
);
            });

});

bDestroy: true zerstört zuerst eine mit diesem Selektor verbundene Instanz, bevor eine neue Instanz neu initialisiert wird.

13
Keith.Abramo

Ich bin mir nicht sicher warum. Aber

oTable6.fnDraw();

Funktioniert bei mir. Ich habe es in die nächste Zeile gesetzt.

7
jairobg

Benutze das:

var table = $(selector).dataTables();
table.api().draw(false);

oder

var table = $(selector).DataTables();
table.draw(false);
4
Avram Cosmin

Für Benutzer moderner DataTables (1.10 und höher) beziehen sich alle Antworten und Beispiele auf dieser Seite auf die alte API, nicht auf die neue. Es fiel mir sehr schwer, ein neueres Beispiel zu finden, aber schließlich fand ich diesen DT-Forumbeitrag (TL; DR für die meisten Leute), der mich zu diesem prägnanten Beispiel führte. 

Der Beispielcode funktionierte für mich, nachdem mir schließlich die $ () - Selector-Syntax unmittelbar um die HTML-Zeichenfolge aufgefallen war. Sie müssen einen Knoten hinzufügen, nicht einen String.

Dieses Beispiel ist wirklich einen Blick wert, aber im Sinne von SO, wenn Sie nur einen Codeausschnitt sehen möchten, der funktioniert: 

var table = $('#example').DataTable();
  table.rows.add( $(
          '<tr>'+
          '  <td>Tiger Nixon</td>'+
          '  <td>System Architect</td>'+
          '  <td>Edinburgh</td>'+
          '  <td>61</td>'+
          '  <td>2011/04/25</td>'+
          '  <td>$3,120</td>'+
          '</tr>'
  ) ).draw();

Der vorsichtige Leser bemerkt vielleicht, dass table.row.add (...), da wir nur eine Datenzeile hinzufügen, ebenfalls funktionieren sollte und für mich funktionieren sollte.

2
Anne Gunn

In der Initialisierung verwenden Sie:

"fnServerData": function ( sSource, aoData, fnCallback ) {
                    //* Add some extra data to the sender *
                    newData = aoData;
                    newData.Push({ "name": "key", "value": $('#value').val() });

                    $.getJSON( sSource, newData, function (json) {
                        //* Do whatever additional processing you want on the callback, then tell DataTables *
                        fnCallback(json);
                    } );
                },

Und dann einfach benutzen:

$("#table_id").dataTable().fnDraw();

Das Wichtigste in den fnServerData ist:

    newData = aoData;
    newData.Push({ "name": "key", "value": $('#value').val() });

wenn Sie direkt auf aoData drücken, ist die Änderung beim ersten Zeichnen der Tabelle dauerhaft und fnDraw funktioniert nicht wie gewünscht.

1
laromicas

Das funktioniert für mich

var dataTable = $('#HelpdeskOverview').dataTable();

var oSettings = dataTable.fnSettings();
dataTable.fnClearTable(this);
for (var i=0; i<json.aaData.length; i++)
{
   dataTable.oApi._fnAddData(oSettings, json.aaData[i]);
}
oSettings.aiDisplay = oSettings.aiDisplayMaster.slice();
dataTable.fnDraw();
1
Imran Rashid

So füttere ich meine Tabelle mit Daten, die von Ajax abgerufen werden (nicht sicher, ob dies die beste Methode ist, aber es fühlt sich intuitiv an und funktioniert gut):

/* initialise table */
oTable1 = $( '.tables table' ).dataTable
( {
    'sPaginationType': 'full_numbers',
    'bLengthChange': false,
    'aaData': [],
    'aoColumns': [{"sTitle": "Tables"}],
    'bAutoWidth': true
} );


 /*retrieve data*/
function getArr( conf_csv_path )
{
    $.ajax
    ({
        url  : 'my_url'
        success  : function( obj ) 
        {
            update_table( obj );
        }
    });
}


/* build table data */
function update_table( arr )
{        
    oTable1.fnClearTable();
    for ( input in arr )
    {
        oTable1.fnAddData( [ arr[input] );
    }                                
}
0
Igor L.