CODEWITHSUNDEEP
javascriptphpdatatables
Rock
Rock

Reputation: 57

Datatables cant get response

Im trying to show university schedule with datatables . Im sending request with datatable ajax . But as response get undefined .

server side code : I have array with schedule.

<?php
// File: schedule_ajax_return.php
$data = [
  1 => [
    "monday" => "Ағылшын тілі 1год группа 8К</br>Қонысбаева Айжан Әміржанқызы</br>203",
    "tuesday" => "</br></br>",
    "wednesday" => "</br></br>",
    "thursday" => "</br></br>",
    "friday" => "</br></br>",
  ],
  2 => [
    "monday" => "</br><br>",
    "tuesday" => "</br></br>",
    "wednesday" => "</br></br>",
    "thursday" => "</br></br>",
    "friday" => "</br></br>",
  ],
  3 => [
    "monday" => "</br><br>",
    "tuesday" => "</br></br>",
    "wednesday" => "</br></br>",
    "thursday" => "</br></br>",
    "friday" => "</br></br>",
  ],
  4 => [
    "monday" => "</br><br>",
    "tuesday" => "</br></br>",
    "wednesday" => "</br></br>",
    "thursday" => "</br></br>",
    "friday" => "</br></br>",
  ],
  5 => [
    "monday" => "</br><br>",
    "tuesday" => "</br></br>",
    "wednesday" => "</br></br>",
    "thursday" => "</br></br>",
    "friday" => "</br></br>",
  ],
];
echo json_encode($data);

Then Im returning it as json with echo json_encode($array);

client side Im accepting response and showing data in colums with columns

var table = $('#schedule_by_group').DataTable({
    select:true,
    dom: 'Bfrtip',
    ajax: {
        "url": "schedule_ajax_return.php",
        "dataSrc": "",
        "data":{"group_id": group_id},
        "type": "POST"
    },
    columns : [
        {"data": "monday"},
        {"data": "tuesday"},
        {"data": "wednesday"},
        {"data": "thursday"},
        {"data": "friday"}
    ]
});

In documentation of datatables I read that I can send data as array of arrays or array of objects . So Im sending It as array of arrays but It shows undefined.

Upvotes: 0

Views: 84

Answers (1)

yunzen
yunzen

Reputation: 33439

See this documentation about Data aaray location on datatables.net

Emphasis mine:

1) Simple array of data:

// ... dataSrc: '' // ...

2) Object with data property - note that the data parameter format shown here can be used with a simplified DataTables initialisation as data is the default property that DataTables looks for in the source data object.

// ... dataSrc: 'data' // ...

Your JSON response should be 

[
  {
    "monday": "Ағылшын тілі 1год группа 8К</br>Қонысбаева Айжан Әміржанқызы</br>203",
    "tuesday": "</br></br>",
    "wednesday": "</br></br>",
    "thursday": "</br></br>",
    "friday": "</br></br>"
  },
  {
    "monday": "</br><br>",
    "tuesday": "</br></br>",
    "wednesday": "</br></br>",
    "thursday": "</br></br>",
    "friday": "</br></br>"
  },
  {
    "monday": "</br><br>",
    "tuesday": "</br></br>",
    "wednesday": "</br></br>",
    "thursday": "</br></br>",
    "friday": "</br></br>"
  },
  {
    "monday": "</br><br>",
    "tuesday": "</br></br>",
    "wednesday": "</br></br>",
    "thursday": "</br></br>",
    "friday": "</br></br>"
  },
  {
    "monday": "</br><br>",
    "tuesday": "</br></br>",
    "wednesday": "</br></br>",
    "thursday": "</br></br>",
    "friday": "</br></br>"
  }
]

to work with dataSrc: "",
[Explore online on jsoneditoronline.org]

If your JSON has this structure

{
  "data": [
    {
      "monday": "Ағылшын тілі 1год группа 8К</br>Қонысбаева Айжан Әміржанқызы</br>203",
      "tuesday": "</br></br>",
      "wednesday": "W</br></br>",
      "thursday": "</br></br>",
      "friday": "</br></br>"
    },
    {
      "monday": "</br><br>",
      "tuesday": "</br></br>",
      "wednesday": "</br></br>",
      "thursday": "</br></br>",
      "friday": "</br></br>"
    },
    {
      "monday": "</br><br>",
      "tuesday": "</br></br>",
      "wednesday": "W2</br></br>",
      "thursday": "</br></br>",
      "friday": "</br></br>"
    },
    {
      "monday": "</br><br>",
      "tuesday": "</br></br>",
      "wednesday": "</br></br>",
      "thursday": "</br></br>",
      "friday": "</br></br>"
    },
    {
      "monday": "</br><br>",
      "tuesday": "</br></br>",
      "wednesday": "</br></br>",
      "thursday": "</br></br>",
      "friday": "</br></br>"
    }
  ]
}

you can omit the dataSrc: "", as the default value of "data" would be used.
[Explore online on jsoneditoronline.org]

I've made an example on CodeSandbox that uses static JSON instead of an PHP array, but the principle should be clear. I made two JSON file (test-array.json and test-data.json). test-array.json works with dataSrc: "" or dataSrc: null; and test-data.json works with dataSrc: "data" or dataSrc: undefined.

But your PHP code creates a different structure as seen here in 3v4l.org (structure inspect). The PHP code [ 1 => [ '...' ] ] creates an associative array, not an indexed array. Associative Arrays are json_encoded to JSON objects, not JSON arrays as we would need. To achieve this, you must omit the keys (though they are numeric) in your array. This should do:

<?php
// File: schedule_ajax_return.php
$data = [
  [
    "monday" => "Ағылшын тілі 1год группа 8К</br>Қонысбаева Айжан Әміржанқызы</br>203",
    "tuesday" => "</br></br>",
    "wednesday" => "</br></br>",
    "thursday" => "</br></br>",
    "friday" => "</br></br>",
  ],
  [
    "monday" => "</br><br>",
    "tuesday" => "</br></br>",
    "wednesday" => "</br></br>",
    "thursday" => "</br></br>",
    "friday" => "</br></br>",
  ],
  [
    "monday" => "</br><br>",
    "tuesday" => "</br></br>",
    "wednesday" => "</br></br>",
    "thursday" => "</br></br>",
    "friday" => "</br></br>",
  ],
  [
    "monday" => "</br><br>",
    "tuesday" => "</br></br>",
    "wednesday" => "</br></br>",
    "thursday" => "</br></br>",
    "friday" => "</br></br>",
  ],
  [
    "monday" => "</br><br>",
    "tuesday" => "</br></br>",
    "wednesday" => "</br></br>",
    "thursday" => "</br></br>",
    "friday" => "</br></br>",
  ],
];
echo json_encode($data);

See here on 3v4l.org

Upvotes: 1

Related Questions