從PHP Json對象填充JQuery DataTables

我想使用ajax填充我的表（DataTables.net）。收到的值來自我的php腳本生成的json對象。目前我可以通過使用經典方法來管理它，從PHP的變量，但我想現在切換到JSON方法。從PHP Json對象填充JQuery DataTables

這裏是我的jsfiddle在那裏我有沒有任何成功測試了很多東西：\

$(document).ready(function() { 
 
    $('#example').DataTable({ 
 
    "bProcessing": true, 
 
     "ajax": { 
 
     "url": "http://www.json-generator.com/api/json/get/bUCyQgmGeW?indent=2", 
 
     "dataSrc": "syncok" 
 
     }, 
 
     "columns": [ 
 
     { "data": "Ticket_RT" }, 
 
     { "data": "Last_up_time" }, 
 
     { "data": "Last_down_time" }, 
 
     { "data": "Date_du_Diag" }, 
 
     { "data": "Commentaire_FT" }, 
 
     { "data": "Code_Retour_FT" }, 
 
     { "data": "Supprimer" } 
 
     ] 
 
    }); 
 
});

body { 
 
    font-family: "Open Sans", "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif; 
 
}

<script src="https://code.jquery.com/jquery-1.12.3.js"></script> 
 
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script> 
 

 

 
<div id="exampleDiv">hello</div> 
 
<table width="100%" class="display" id="example"> 
 
    <thead> 
 
    <tr> 
 
     <th>Ticket RT</th> 
 
     <th>Last up time</th> 
 
     <th>Date du Diag RT</th> 
 
     <th>Commentaire FT</th> 
 
     <th>Code Retour FT</th> 
 
     <th>Supprimer</th> 
 
    </tr> 
 
    </thead> 
 
</table>

我希望有人能幫助我解決這個問題，我已經從計算器嘗試了許多片段，並從原始文件，但我不能自己管理它！

非常感謝您的幫助:)

問候。

編輯：

要解決這個問題必須.DataTable函數之前補充一點： $("#example").empty();

，加入一個選項"bDestroy": true,到.DataTable功能。從這個線程

解決方案：DataTables Forum

編輯2：

對不起，我是瞎了！現在我的標題在添加.empty（）函數後消失... 現在我試圖解決這個問題，所以如果有人可以把我放在正確的方式！預先感謝您的幫助:)

FIX：

$(document).ready(function() { 
$("#ret_syncok").empty(); 
$('#ret_syncok').DataTable({ 
    "bDestroy": true, 
    "bProcessing": true, 
    "ajax": { 
     "url": "js/optionsTables/cMass_ret_syncok.php", 
     "dataSrc": "syncok" 
    }, 
    "columns": [ 
     { "data": "Ticket_RT" }, 
     { "data": "Last_up_time" }, 
     { "data": "Last_down_time" }, 
     { "data": "Date_du_Diag_RT" }, 
     { "data": "Commentaire_FT" }, 
     { "data": "Code_Retour_FT" }, 
     { "data": "Supprimer" } 
    ], 
    "columnDefs": [ 
     { "title": "Ticket RT", "targets": 0 }, 
     { "title": "Last up time", "targets": 1 }, 
     { "title": "Last down time", "targets": 2 }, 
     { "title": "Date du Diag_RT", "targets": 3 }, 
     { "title": "Commentaire FT", "targets": 4 }, 
     { "title": "Code Retour FT", "targets": 5 }, 
     { "title": "Supprimer", "targets": 6 } 
    ] 
}); 
});

我希望能幫助別人:)

來源

2016-08-23 Peacefull

它不是在工作的jsfiddle自阿賈克斯URL是http未採用https，

我在我的電腦中試過，它正在工作。問題是- 列的名稱不一樣。列數不相同。

<html> 
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css"/> 
<div id="exampleDiv">hello</div> 
<table width="100%" class="display" id="example"> 
    <thead> 
    <tr> 
     <th>Ticket RT</th> 
     <th>Last up time</th> 
     <th>Last down time</th> 
     <th>Date du Diag RT</th> 
     <th>Commentaire FT</th> 
     <th>Code Retour FT</th> 
     <th>Supprimer</th> 
    </tr> 
    </thead> 
</table> 

</html> 
<script src="https://code.jquery.com/jquery-1.12.3.js" ></script> 
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js" ></script> 
<script> 
$(document).ready(function() { 
    $('#example').DataTable({ 
    "bProcessing": true, 
     "ajax": { 
    "url": "http://www.json-generator.com/api/json/get/bUCyQgmGeW?indent=2", 
    "dataSrc": "syncok" 
     }, 
     "columns": [ 
    { "data": "Ticket_RT" }, 
    { "data": "Code_Retour_FT" }, 
    { "data": "Date_du_Diag_RT" }, 
    { "data": "Last_up_time" }, 
    { "data": "Supprimer" }, 
    { "data": "Last_down_time" }, 
    { "data": "Commentaire_FT" } 
     ] 
    }); 
}); 

</script>

來源

2016-08-23 13:53:32

以及我不明白什麼發生在JSON代碼，但在我的電腦是結構良好。這是來自Live數據表的另一個測試：http://live.datatables.net/panudoro/1/edit，這很好。很奇怪。來自控制檯日誌的消息錯誤： ** TypeError：headerCells [i]未定義** – Peacefull

由於語言的不同，我認爲Json中的列名在不同的國家是不同的。 –

從PHP Json對象填充JQuery DataTables

回答

相關問題