Ajax-request für server-Seite Daten für jede Seite, die in Datentabellen

Ich bin mit Jquery Datatables laden ein array von Arrays mit Daten (aaData), die über ajax-Aufruf von der server-Seite. Ich will nicht zu ziehen den ganzen Daten auf einmal sondern ich muss, um ajax-request zum laden der Daten jedes mal, wenn Benutzer klickt auf "prev" oder "next" in Datentabellen Paginierung.

Wie kann das erreicht werden ?Ich möchte ein ajax-Aufruf und liefert Ergebnisse auf der Fliegen für, die Seite nur.

Unten ist der javascript-code, wo ich bin, einen Anruf zu tätigen.

$.ajax({              
 type: "GET",
 url: "ajaxBacklog",
 contentType: 'application/json',
 data: null,
 dataType: 'json',
 success: function(json){                  
     oTable = $("#backlogTable").dataTable({
         "aaData": json.aaData,
         "bProcessing": true,
         "bServerSide": true,
         "sPaginationType": "full_numbers",
         "bJQueryUI": true,
         "bRetrieve": true,
         "bPaginate": true,
         "bStateSave": true,
         "bSort": true,
         "aaSorting": [[ 4, "desc" ]],
         "iDisplayLength": 25,
         "oLanguage": {
                 "sProcessing": "<img src='resources/images/loader.gif'/>",
                 "sEmptyTable": "No records found."
             },
         "aoColumns": [
             { "sClass": "alignCenter"},
             { "sClass": "left"},
             { "sClass": "left"},
             { "sClass": "left"},
             { "sType": 'date-uk', "sClass":"datecolumn"},
             { "sType": 'date-uk', "sClass":"datecolumn"},
             { "sClass": "left"},
             { "sClass": "left"}
         ],
         "error": function() {
             alert("Failed to load Data");
         }
     });
    }
   }
);

Habe ich auch nach dem server-seitige Verarbeitung von datatables als gut, aber nichts funktioniert.

InformationsquelleAutor roger_that | 2013-04-11
  1. 1

    In Datentabellen server-seitige Verarbeitung jeder Klick auf 'zurück'/'weiter' - button (auch der filter, Sortierung etc) - Aufruf request (out of the box) für Funktion angegeben in sAjaxSource Eigenschaft - Sie können dies überprüfen, rufen Sie in Ihrem browser Konsole.

    Aufruf haben viele nützliche Parameter. Sie benötigen iDisplayLength und iDisplayStart in Ihrer Funktion für " cut " (nach Sortieren und filtern Sie Ihre Daten aus iDisplayStart zu iDisplayStart+iDisplayLength.

    Sollten Sie natürlich ändern Sie Ihre code-Struktur, wie Sie sehen können, in Datentabellen Dokumentation - definieren Datentabellen code für die Initialisierung und zeigen ajax-Quelle in sAjaxSource Eigenschaft.

    • Ich habe eine array-list der array-list-of-String (im Grunde meine aaData), die ich füllen Sie nach dem abrufen von Daten von DB und Schleife durchgehen und wenn meine aaData wird besiedelt, Ihre in der Tabelle angezeigt. Wie kann ich das ändern mein code, um die Dinge funktionieren? 'für (BacklogVO obj : backlogVO) { ArrayList<String> Zeilen = new ArrayList<Zeichenfolge>(); Zeile.add(addActionColumn()); row.add(obj.getTask()); row.add(obj.getTaskType()); row.add(obj.getOwnedBy()); row.add(obj.getStatus()); row.add(obj.getPriority()); aaData.add(Zeile); }'
    • hier ist ein Beispiel für json-format: datatables.net/release-datatables/examples/server_side/...
    • server-Antwort, die ich bekommen, ist dies { "aaData":[ [ "<img src="actionImage.png">, "AB MIDT DATA PROCESSING", "Pre-sales", "Kuldeep Singh", "11-04-2013", "17-04-2013", "WIP", "High" ] ] } Aber noch bin ich nicht in der Lage, um es zu passen zu meinem Bedarf. Was weiß ich über den datatables ist, bringt seine gesamten Daten, und speichern Sie es im browser Speicher, und da hat es ganz den Daten, Paginierung, Sortierung und Filterung die performance ist sehr schnell. Ich benötige ein ajax-call auf jeden Paginierung Zahl auf, sagen server zu bringen, sagen wir 25 Datensätze zu jeder Zeit. Wie kann das erreicht werden?
    • Wie ich schon erwähnt, in der Antwort wird bei jedem Aufruf sollten Sie wieder vom server nur ein Teil Ihrer Daten, zum Beispiel - nur 25 Datensätze
    • das ist, was ich Fragen wie man das nennen für jede Anforderung ? Wie u sehen können in dem obigen code, die URL verweist auf eine Methode in struts-Aktion, wo aaData aufgefüllt
    • wenn Sie definieren, datatables und point-URL in sAjaxSource, Anruf, jede Anfrage wird funktionieren out of the box
    • sAjaxSource nicht zu funktionieren scheint, da es nicht das beziehen der Daten, wie ich bin nicht in der Lage zu geben, eine eindeutige URL. Ich Tue dies in JS-code "sAjaxSource" : json.aaData aber nicht in der Lage zum Rendern der Antwort. Die URl ajaxBacklog ist abgebildet in struts.xml eine Methode, die das Auffüllen aaData. for (BacklogVO obj : backlogVO) { ArrayList<String> row = new ArrayList<String>(); row.add(addActionColumn()); row.add(obj.getTask()); row.add(obj.getTaskType()); row.add(obj.getOwnedBy()); row.add(obj.getStatus()); row.add(obj.getPriority()); aaData.add(row); } Wie kann ich änderungen wie pro Anforderung?
    • haben Sie versucht, Punkt ajaxBacklog zu aAjaxSource?
    • Ja, habe ich. Aber das gab seltsame Ergebnisse, wie Es ist, Holen alle Datensätze und zeigt Sie alle, unabhängig von meinem iDisplayLength die auf 25 festgelegt ist. Im Idealfall sollte es zeigen 25 Ergebnis in der ersten Seite und so weiter. Auch am unteren Ende der Tabelle der text sagt, "Zeige 1 bis NaN an NaN total entries". Ich weiß nicht, was es ist oTable = $("#id").dataTable({ "sAjaxSource":"ajaxBacklog", "bProcessing":true, "bServerSide":true, "sPaginationType":"full_numbers", "bJQueryUI":true, "bRetrieve":true, "bPaginate":true, "bStateSave":true, "bSort":true, "aaSorting":[[4,"desc"]], "iDisplayLength":25, } });
    • Und das ist meine Tabellenstruktur <table id="backlogTable"> <thead> <tr> <th>Actions</th> <th>Task</th> <th>Task Type</th> <th>Owned By</th> <th>Created Date</th> <th>Expected End Date</th> <th>Status</th> <th>Priority</th> </tr> </thead> <tbody> </tbody> </table> davon Ausgehen, dass ich diese vielen Spalten.
    • Die Frage ist: hat Ihre Funktion zurückgeben aller Datensätze? NaN ist zu zeigen, weil Sie wahrscheinlich nicht senden iTotalRecords und iTotalDisplayRecords Parameter aus der Funktion
    • Nun, das ist, was ich Tue, Meine server-Antwort ist { "aaData":[ [ "<img src="actionImage.png">, "AB MIDT DATA PROCESSING", "Pre-sales", "Kuldeep Singh", "11-04-2013", "17-04-2013", "WIP", "High" ] ], "iTotalDisplayRecords":"25","iTotalRecords":"25"} Datensätze Gesamt immer auf der Seite angezeigt, sind 146 Zeilen. Anzahl Datensätze insgesamt in der Datenbank ist dieselbe, 146 Zeilen. Abfrage zum abrufen der Daten ist normal "select *" - Abfrage, die bringt den ganzen Daten. Unten die Daten-Tabellen eine Zeile, die sagt anzeigen von 1 bis 25 Datensätze, die aus insgesamt 25 Einträge. Ich bin schlecht nun fest. 🙁
    • aber Sie sollten die Abfrage nur 25 Zeilen in jeder call, und put dieser Zeile 25 in aaData Liste

    InformationsquelleAutor Lukasz Koziara
Schreibe einen Kommentar