Populate JQuery DataTables from PHP Json Object

Question

i'm trying to populate my table (DataTables.net) using ajax. The received values are from an json object generated by my php script. For the moment i can manage it by using classic method, vars from php but i want to switch to json method now.

Here is my jsfiddle where i have tested many things without any success :\

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

I hope someone can help me with this problem, i have tried many snippet from stackoverflow and from the original documentation but i can't manage it by myself !

Thank you in advance for your help :)

Regards.

EDIT :

To fix this issue you must add this before .DataTable function : $("#example").empty();

And add an option "bDestroy": true, to .DataTable function.

Solution from this thread : DataTables Forum

EDIT 2 :

Excuse me i'm blind ! Now my title disappear after adding .empty() function... Now i'm trying to fix this another problem, so if someone can put me in the right way ! Thank you in advance for the help :)

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

I hope that can help someone else :)

Aniket Singh · Accepted Answer · 2016-08-23 13:53:32Z

2

It's not working in Jsfiddle since Ajax url is http not https,

I tried in my computer and it's working. Problem was- column's names was not same. Number of columns were not same.

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

answered Aug 23, 2016 at 13:53

Aniket Singh

2,6942 gold badges24 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Peacefull Over a year ago

well i don't understand what happen to the json code but in my computer is well structured. Here is another test from Live dataTables : live.datatables.net/panudoro/1/edit and that works great. Very strange. Message error from console log : TypeError: headerCells[i] is undefined

Aniket Singh Over a year ago

I think Column names in Json are different in different countries due to language difference.

Collectives™ on Stack Overflow

Populate JQuery DataTables from PHP Json Object

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related