it-swarm.com.de

wie kann ich jquery datatables fnServerData auslösen, um eine Tabelle über zu aktualisieren? AJAX Wenn ich auf eine Schaltfläche klicke?

Ich verwende das Datatables-Plugin mit serverseitigen Daten und aktualisiere die Tabelle mit AJAX.

Mein dataTables-Setup sieht folgendermaßen aus:

tblOrders = parameters.table.dataTable( {
    "sDom": '<"S"f>t<"E"lp>',
    "sAjaxSource": "../file.cfc",
    "bServerSide": true,
    "sPaginationType": "full_numbers",  
    "bPaginate": true,
    "bRetrieve": true,
    "bLengthChange": false,         
    "bAutoWidth": false,
    "aaSorting": [[ 10, "desc" ]],      
    "aoColumns": [                      
        ... columns 
                  ],
    "fnInitComplete": function(oSettings, json) {
        // trying to listen for updates
        $(window).on('repaint_orders', function(){
            $('.tbl_orders').fnServerData( sSource, aoData, fnCallback, oSettings );
            });
        },
    "fnServerData": function ( sSource, aoData, fnCallback, oSettings ) {
        var page = $(oSettings.nTable).closest('div:jqmData(wrapper="true")')
        aoData.Push(
            { "name": "returnformat", "value": "plain"},
            { "name": "s_status", "value": page.find('input[name="s_status"]').val() },
            { "name": "s_bestellnr", "value": page.find('input[name="s_bestellnr"]').val() },
            { "name": "form_submitted", "value": "dynaTable" }
            );
        $.ajax({ "dataType": 'json', "type": "POST", "url": sSource, "data": aoData , "success": fnCallback });
        }

Ich habe einige benutzerdefinierte Felder zum Filtern der Daten-Server-Seite, die ich zusammen mit der AJAX -Anforderung schiebe. Das Problem ist, dass ich nicht weiß, wie eine JSON-Anforderung von außerhalb der Tabelle ausgelöst werden kann. Wenn der Benutzer den Filter eingibt, wird die Tabelle von fnServerData ausgelöst und aktualisiert. Wenn der Benutzer jedoch ein Steuerelement außerhalb der Tabelle auswählt, weiß ich nicht, wie die Funktion fnServerData ausgelöst werden soll.

Im Moment versuche ich es mit einem benutzerdefinierten Ereignis, das ich in fnInitComplete auslöse und abhöre. Während ich feststellen kann, dass der Benutzer ein benutzerdefiniertes Filterkriterium auswählt, fehlen mir alle Parameter, die erforderlich sind, damit fnServerData korrekt ausgelöst wird.

Frage :
Gibt es eine Möglichkeit, fnServerData über eine Schaltfläche außerhalb der eigentlichen dataTables-Tabelle auszulösen?

Ich denke, ich könnte versuchen, dem Filter ein Leerzeichen hinzuzufügen, aber das ist eigentlich keine Option.

Danke für die Eingabe!

Frage

18
frequent

Ich habe dieses Skript vor einiger Zeit gefunden (daher kann ich mich nicht erinnern, woher es kam :( und wem ich es zu verdanken habe: '(), aber hier:

$.fn.dataTableExt.oApi.fnReloadAjax = function (oSettings, sNewSource, fnCallback, bStandingRedraw) {
    if (typeof sNewSource != 'undefined' && sNewSource != null) {
        oSettings.sAjaxSource = sNewSource;
    }
    this.oApi._fnProcessingDisplay(oSettings, true);
    var that = this;
    var iStart = oSettings._iDisplayStart;
    var aData = [];

    this.oApi._fnServerParams(oSettings, aData);

    oSettings.fnServerData(oSettings.sAjaxSource, aData, function (json) {
        /* Clear the old information from the table */
        that.oApi._fnClearTable(oSettings);

        /* Got the data - add it to the table */
        var aData = (oSettings.sAjaxDataProp !== "") ?
            that.oApi._fnGetObjectDataFn(oSettings.sAjaxDataProp)(json) : json;

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

        oSettings.aiDisplay = oSettings.aiDisplayMaster.slice();
        that.fnDraw();

        if (typeof bStandingRedraw != 'undefined' && bStandingRedraw === true) {
            oSettings._iDisplayStart = iStart;
            that.fnDraw(false);
        }

        that.oApi._fnProcessingDisplay(oSettings, false);

        /* Callback user function - for event handlers etc */
        if (typeof fnCallback == 'function' && fnCallback != null) {
            fnCallback(oSettings);
        }
    }, oSettings);
}

Fügen Sie hinzu, dassVORSie die datierbare Initialisierungsfunktion aufrufen. dann kannst du das reload einfach so aufrufen:

$("#userFilter").on("change", function () {
        oTable.fnReloadAjax(); // In your case this would be 'tblOrders.fnReloadAjax();'
    });

userFilter ist eine ID für eine Dropdown-Liste. Wenn sich Änderungen ergeben, werden die Daten für die Tabelle erneut geladen. Ich habe dies nur als Beispiel hinzugefügt, aber Sie können es bei jedem Ereignis auslösen.

11
Drakkainen

Aus einer Diskussion hier schlägt Allan (der DataTables-Typ) vor, dass ein Aufruf von fnDraw die gewünschten Ergebnisse liefert. Dies ist die Methode, die ich für das Neuladen von serverseitigem Material (über FnServerData, was wichtig ist) verwende, und es hat bisher funktioniert.

$("#userFilter").on("change", function() {
    oTable.fnDraw();  // In your case this would be 'tblOrders.fnDraw();'
});
18
Chuck

Alle zuvor genannten Lösungen weisen Probleme auf (beispielsweise werden die zusätzlichen Benutzer-http-Parameter nicht veröffentlicht oder sind veraltet). Also habe ich folgende Lösung gefunden, die gut funktioniert.

Erweiterungsfunktion (Meine Parameter sind ein Array von Schlüsselwertpaaren)

<pre>
$.fn.dataTableExt.oApi.fnReloadAjax = function (oSettings, sNewSource, myParams ) {
if ( oSettings.oFeatures.bServerSide ) {
    oSettings.aoServerParams = [];
    oSettings.aoServerParams.Push({"sName": "user",
        "fn": function (aoData) {
            for (var i=0;i<myParams.length;i++){
            aoData.Push( {"name" : myParams[i][0], "value" : myParams[i][1]});
         }
     }});
     this.fnClearTable(oSettings);
     this.fnDraw();
     return;
    }
};
</pre>

Beispiel zur Verwendung des Aktualisierungsereignis-Listeners.

<pre>
oTable.fnReloadAjax(oTable.oSettings, supplier, val);
</pre>

Nur eine Sache, auf die man achten muss. Zeichnen Sie die Tabelle nicht neu, da sie erst einmal erstellt wurde. Dies ist jedoch zeitaufwändig. Zeichnen Sie es daher nur beim ersten Mal. Ansonsten laden Sie es erneut

<pre>
var oTable;
if (oTable == null) {
    oTable = $(".items").dataTable(/* your inti stuff here */); {
}else{
    oTable.fnReloadAjax(oTable.oSettings, supplier, val);
}
</pre>
4
Mitja Gustin

Ich weiß, dass dies zu spät ist, aber fnDraw (von diese Antwort oben - die die akzeptierte Antwort sein sollte), ist ab Version 1.10 veraltet

Die neue Methode ist:

this.api( true ).draw( true );

Welche, BTW, hat einen Kommentar, der lautet:

// Note that this isn't an exact match to the old call to _fnDraw - it takes
// into account the new data, but can hold position.
1
cale_b

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 Mal dauerhaft. Wenn Sie die Tabelle erneut zeichnen, funktioniert das FnDraw-Element nicht wie gewünscht. Verwenden Sie also eine Kopie von aoData, um Daten an den Ajax zu senden.

1
laromicas

Um die Daten erneut zu laden, müssen Sie einfach die DataTable mit dem Jquery-Selector mit der Funktion DataTable() auswählen und die Funktion _fnAjaxUpdate aufrufen.

Hier ist ein Beispiel:

$('#exampleDataTable').DataTable()._fnAjaxUpdate();
0
raBne

Ähnlich wie die Antwort von Mitja Gustin. Eine Schleife geändert, sNewSource hinzugefügt.

$.fn.dataTableExt.oApi.fnReloadAjax = function (oSettings, sNewSource, myParams ) {
    if(oSettings.oFeatures.bServerSide) {
        if ( typeof sNewSource != 'undefined' && sNewSource != null ) {
            oSettings.sAjaxSource = sNewSource;
        }
        oSettings.aoServerParams = [];
        oSettings.aoServerParams.Push({"sName": "user",
            "fn": function (aoData) {
                for(var index in myParams) {
                    aoData.Push( { "name" : index, "value" : myParams[index] });
                }
            }
        });
        this.fnClearTable(oSettings);
        return;
    }
};

var myArray = {
    "key1": "value1",
    "key2": "value2"
};

var oTable = $("#myTable").dataTable();
oTable.fnReloadAjax(oTable.oSettings, myArray);
0
Tomasz Majerski