从PHP Json对象填充JQuery数据表 - Populate JQuery DataTables from PHP Json Object

我试图填充我的表(DataTables.net)使用ajax。接收到的值来自php脚本生成的json对象。目前我可以通过使用经典方法来管理它，vars从php，但我现在想切换到json方法。

这是我的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>

我希望有人能帮助我解决这个问题，我已经从stackoverflow和原始文档中尝试了许多片段，但我不能自己管理它!

提前感谢您的帮助:)

致意。编辑:

要解决这个问题，你必须在。datatable函数之前添加这个:$("#example").empty();

并在。datatable函数中增加一个选项"bDestroy": true,。

从这个线程的解决方案:数据表论坛

EDIT 2:

对不起，我是盲人!现在我的标题消失后添加。empty()函数…现在我正试图解决另一个问题，所以如果有人能把我放在正确的方式!提前感谢您的帮助:)

修复:

$(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 }
    ]
});
});

我希望能帮助到别人

由于Ajax 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>