2016-03-25 3 views
0

Я пытаюсь разбивать страницы на динамические данные. Я начал использовать Datatable, но я не могу загрузить Datatable с объектами JSON. Пожалуйста найти мой код ниже:Не удалось загрузить Datatable с объектами JSON

function drawTable(data) { 

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

Мой 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" 
},.. 

Моя страница HTML:

<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> 

В таблице не получает загружены, но загрузка ... появляется в таблице. Я проверил, JSON в правильном формате.

Я отредактировал мой код:

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

и теперь моя таблица загружается с пустыми столбцами, и я получаю сообщение об ошибке, как: DataTables предупреждение: таблица ID = t01 - Запрошенный неизвестный параметр «Username» для строки 0 , столбец 0.

+0

посмотреть, есть ли ошибки в консоли браузера. –

+0

@KartikeyaKhosla: У меня нет ошибок в консоли :( –

+0

удалить и попробовать '' aoColumns ":' set – Ashan

ответ

0

Ваш код отлично работает для меня. Это, как я использовал его: первый: я создаю json.php, который содержит следующий код:

[{ 
    "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" 
}] 

После того как я создать другую страницу test.php с этими следующими кодами:

<!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> 

И это result: enter image description here

+0

Я не уверен, почему, но когда я проанализировал JSON и использовал объекты JSON в качестве входных данных (данные в моей функции), он работал отлично. –

+0

О, я не вижу, где проблема была, потому что у меня не было полного кода –

+0

Вы не передали JSON функция? –

0

попробовать это, я думаю, что этот полезный

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" } 
      ] 
     }); 
    } 
Смежные вопросы