2016-03-25 6 views
0

Ich versuche eine Seitennummerierung aus dynamischen Daten. Ich habe begonnen Datatable zu verwenden, aber ich kann Datatable nicht mit JSON Objects laden. Bitte meinen Code unten finden:Datatable konnte nicht mit JSON-Objekten geladen werden

function drawTable(data) { 

    $('#t01').DataTable({ 
     ajax: { 
     "aaData": data, 
     "dataSrc": "" 
     }, 
     "aoColumns": [ 
      { "mdata": "UserName" }, 
      { "mdata": "AppName" }, 
      { "mdata": "OS" }, 
      { "mdata": "Changes" }, 
      { "mdata": "Time" } 
     ] 
    }); 
} 

Meine JSON:

[{ 
    "UserName": "testUser", 
    "AppName": "mtv_app", 
    "OS": "android", 
    "Changes": "tveEnabled : true to false, ", 
    "Time": "2016-03-22 11:36:09" 
}, { 
    "UserName": "testUser", 
    "AppName": "mtv_app", 
    "OS": "android", 
    "Changes": "tveEnabled : false to true, ", 
    "Time": "2016-03-22 11:44:11" 
},.. 

Meine HTML-Seite:

<table id="t01" class="display" cellspacing="0" width="100%"> 
     <thead> 
      <tr> 
       <th>UserName</th> 
       <th>AppName</th> 
       <th>OS</th> 
       <th>Changes</th> 
       <th>Time</th> 

      </tr> 
     </thead> 
    </table> 

Der Tisch ist nicht immer geladen, aber loading ... erscheint in der Tabelle. Ich habe überprüft, JSON ist im richtigen Format.

ich meinen Code bearbeitet:

function drawTable(data) { 
    console.log(data); 
    $('#t01').DataTable({ 
     "processing" : true, 
     "data": data, 
     "columns": [ 
      { "data": "UserName" }, 
      { "data": "AppName" }, 
      { "data": "OS" }, 
      { "data": "Changes" }, 
      { "data": "Time" } 
     ] 
    }); 
} 

und jetzt ist meine Tabelle mit leeren Spalten geladen und ich bin immer Fehler wie: Tables Warnung: Tabelle id = t01 - Angeforderte unbekannter Parameter ‚username‘ für Zeile 0 Spalte 0.

+0

sehen, ob es einen Fehler in der Browser-Konsole gibt. –

+0

@KartikeyaKhosla: Ich bekomme keine Fehler in der Konsole :( –

+0

entfernen und versuchen '" aoColumns ":' set – Ashan

Antwort

0

Ihre Code Arbeit für mich in Ordnung. Dies ist, wie ich es benutzt: zuerst: Ich erstelle eine json.php, die den folgenden Code enthält:

[{ 
    "UserName": "testUser", 
    "AppName": "mtv_app", 
    "OS": "android", 
    "Changes": "tveEnabled : true to false, ", 
    "Time": "2016-03-22 11:36:09" 
}, { 
    "UserName": "testUser", 
    "AppName": "mtv_app", 
    "OS": "android", 
    "Changes": "tveEnabled : false to true, ", 
    "Time": "2016-03-22 11:44:11" 
}] 

Nachdem ich eine andere Seite test.php mit diesen folgenden Codes erstellen:

<!DOCTYPE html> 
<html> 
<head> 
    <title>Test</title> 
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" type="text/css" /> 
<link rel="stylesheet" type="text/css" href="https://www.datatables.net/release-datatables/extensions/TableTools/css/dataTables.tableTools.css"> 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"></script> 
<script type="text/javascript" src="https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script> 
</head> 
<body> 
<table id="t01" class="display" cellspacing="0" width="100%"> 
     <thead> 
      <tr> 
       <th>UserName</th> 
       <th>AppName</th> 
       <th>OS</th> 
       <th>Changes</th> 
       <th>Time</th> 

      </tr> 
     </thead> 
    </table> 
</body> 
<script type="text/javascript"> 
function drawTable(data) { 
    console.log(data); 
    $('#t01').DataTable({ 
     "processing" : true, 
     "data": data, 
     "columns": [ 
      { "data": "UserName" }, 
      { "data": "AppName" }, 
      { "data": "OS" }, 
      { "data": "Changes" }, 
      { "data": "Time" } 
     ] 
    }); 
} 
    $(document).ready(function() { 
       $.ajax({ 
        url: "json.php", 
        dataType: "json", 
        success: function(data) { 
         drawTable(data); 
        } 
       }); 
    }); 
</script> 
</html> 

Und das ist die Ergebnis: enter image description here

+0

Ich bin mir nicht sicher warum, aber wenn ich analysierte den JSON und verwendete JSON-Objekte als Eingabe (Daten in meiner Funktion), es funktionierte völlig in Ordnung –

+0

Oh, ich sehe nicht, wo das Problem war, weil ich Ihren vollständigen Code nicht hatte –

+0

Sie haben den JSON nicht übergeben die Funktion? –

0

dies versuchen, ich denke, das nützlich

function drawTable(data) { 
     console.log(data); 
     $('#t01').DataTable({ 
      "bProcessing": true, 
      "bServerSide": true, 
      "bFilter" : false, 
      "sAjaxSource": "data.php",//your data source 
      "columns": [ 
       { "data": "UserName" }, 
       { "data": "AppName" }, 
       { "data": "OS" }, 
       { "data": "Changes" }, 
       { "data": "Time" } 
      ] 
     }); 
    } 
Verwandte Themen