从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

回答

相关问题