Нет данных, доступных в таблице с использованием DataTables с файлом AJAX и JSON

Question

Я пытаюсь заполнить таблицу файлом JSON с помощью DataTables, но каждый раз, когда я загружаю страницу, таблица просто показывает «Нет данных, доступных в таблице».

Это мой текущий код:

<table id="table_id" class="display">
<thead>
    <tr>
        <th>ID</th>
        <th>Nombre</th>
        <th>Apellido</th>
        <th>Mail</th>
        <th>Confirmado</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>Row 1 Data 1</td>
        <td>Row 1 Data 2</td>
    </tr>
    <tr>
        <td>Row 2 Data 1</td>
        <td>Row 2 Data 2</td>
    </tr>
</tbody>
</table>

<script>
    $(document).ready(function () {
        $('#table_id').DataTable({
            "ajax" : {"url":"/personas.json", "dataSrc":""},
            "columns" : [
                {personas : "id"},
                {personas : "nombre"},
                {personas : "apellido"},
                {personas : "email"},
                {personas : "confirmado"}
            ]
        });
    });
</script>

Это часть кода JSON:

{
"personas": [
    {
        "id": 0,
        "nombre": "Aurelia",
        "apellido": "Osborn",
        "email": "aureliaosborn@lovepad.com",
        "confirmado": false
    },
    {
        "id": 1,
        "nombre": "Curry",
        "apellido": "Jefferson",
        "email": "curryjefferson@lovepad.com",
        "confirmado": true
    }
    ]
}

И это то, что я получаю, когда загружаю страницу (часть):

И на случай, если это может быть проблемой, это каталог JSON:

Answer 1

Изменение

"ajax" : {"url":"/personas.json", "dataSrc":""}

до

"ajax" : {"url":"/personas.json", "dataSrc":"personas"}

Указывая dataSrc, вы говорите, что используете personas массив из вашего personas.json в качестве источника данных.

Смотрите их для справки:

https://datatables.net/examples/ajax/custom_data_property.html https://datatables.net/examples/ajax/custom_data_flat.html

Кроме того, как уже упоминалось, ваш массив [ открывающая скобка не имеет соответствующей ] закрывающей скобки.

Вот рабочий пример с вашими данными:

https://jsfiddle.net/onLuw2pa/165/ Я изменил ваши объекты JSON на массивы значений (при этом вам не нужно указывать columns):

{
   "personas":[
      [
         0,
         "Aurelia",
         "Osborn",
         "aureliaosborn@lovepad.com",
         false
      ],
      [
         1,
         "Curry",
         "Jefferson",
         "curryjefferson@lovepad.com",
         true
      ]
   ]
}

https://jsfiddle.net/onLuw2pa/169/ А вот пример, который использует ваш точный JSON.

Answer 2

Это может быть из-за того, что ваши данные о персонах искажены. Отсутствует закрывающая скобка массива. Должно быть:

{
"personas": [
    {
        "id": 0,
        "nombre": "Aurelia",
        "apellido": "Osborn",
        "email": "aureliaosborn@lovepad.com",
        "confirmado": false
    },
    {
        "id": 1,
        "nombre": "Curry",
        "apellido": "Jefferson",
        "email": "curryjefferson@lovepad.com",
        "confirmado": true
    }
  ]
}