2017-08-10 2 views
3

Ich habe eine Weile mit Datatables gearbeitet, aber anscheinend habe ich sie nicht den richtigen Weg verwendet.jquery datatable Funktionalität inoperable

In der Vergangenheit würde ich beginnen meine Datatable $ .post wie folgt verwendet:

$(document).ready(function() { 
    $.post('process/recordTables.php', function(data) 
    { 
    var table = $('#example1').DataTables(); 
    table.clear(); 
    var obj = JSON.parse(data); 
    obj.forEach(function(item) 
    { 
     table.row.add([item.column1, item.column2, //and so on]); 
    }); 
    table.draw(); 
    }); 
}); 

Der obige Code funktioniert. Mein Datatable druckt die Daten, die ich brauche. Innerhalb des obj.forEach kann ich Spalten mit href-Tags und anderen Features einstellen, falls nötig.

Aber wenn ich in der Lage sein soll, die Datentabelle in festgelegten Intervallen neu zu laden, kann ich die obige Methode nicht verwenden. Es muss die "Ajax" -Methode verwenden.

Nach einigem Versuch und Irrtum, den Code unten verwenden, ich war in der Lage, um die „richtige“ Form (und Verwendung) der jquery Datentabellen zu drucken:

$(document).ready(function() 
{ 
    $('#example1').DataTable({ 
    "processing": true, 
    "serverSide": true, 
    "ajax": { 
     "url": "process/recordTables.php", // same url as the above code 
     "type": "POST", 
     "dataSrc": '' 
    }, 
    "columns": [ 
     { "data": "" }, 
     { "data": "column1" }, 
     { "data": "column2" }, 
     { "data": "column3" }, 
     // and so on 
    ], 
    "iDisplayLength": 25, 
    "order": [[ 3, "desc" ]], 
    "scrollY": 550, 
    "scrollX": true, 
    "bDestroy": true, 
    "stateSave": true, 
    // few others that don't seem to affect functionality 
    }); 
}); 

unmittelbar über den Code verwenden, I konnte die gleichen Daten mit der $ .post-Methode anzeigen.

Allerdings ... keine der Funktionen funktioniert. Die Sortierung funktioniert nicht. Die Seitennummerierung, der Suchfilter, die Dateninformation am unteren Ende der Tabelle zeigen "0 von 0 Einträgen" an. Nichts funktioniert.

Was fehlt mir, um das Problem zu beheben? Ich bin perplex.

Vielen Dank im Voraus.

* EDIT *

Hier ist die HTML-Tabelle:

<table id="example1" class="table table-bordered table-hover table-condensed"> 
<thead> 
    <tr> 
    <th></th> 
    <th>Column1</th> 
    <th>Column2</th> 
    <th>Column3</th> 
    // and so on 
    </tr> 
</thead> 
<tbody> 
</tbody> 
</table> 
+1

Können Sie die Post übergeben HTML in Bezug auf diese DataTable? Und wenn das Attribut dataSrc den Wert '' hat, werden keine Daten angezeigt. Entfernen Sie dieses Attribut vollständig. – Cratebox99

+0

Die Tabelle hinzugefügt. Ich hatte TR und TD-Tags mit dem TBODY, aber immer noch die gleichen Ergebnisse. –

+1

Ihr HTML ist in Ordnung, sollte es nicht berühren müssen, solange die th-Anzahl mit den Spalten in der DataTable-Definition übereinstimmt. – Cratebox99

Antwort

2

Wenn Sie das "serverSide": true, ein Attribut hinzufügen, Ihre Ihre DataTable als server-side processing Einstellung. In diesem Fall alle clientseitige Verarbeitung deaktiviert ist:

Mit serverseitige Verarbeitung aktiviert ist, alle Paging, Suche, Bestellung Aktionen, die Tables führt an einen Server

+0

@davidkonrad Ich habe einen Fehler gemacht und das falsche Attribut kopiert ... Snap.jetzt korrigiert. –