Невозможно добавить строки в мою таблицу, несмотря на хорошее форматирование Json (DataTables)

Question

Я хочу заполнить таблицу (DataTables) запросом AJax

Мой запрос ajax возвращает Json, но заполнить таблицу невозможно, у меня есть эта ошибка:

Предупреждение DataTables: идентификатор таблицы = таблица dt - запрошенный неизвестный параметр '0' для строки 1, столбца 0. Для получения дополнительной информации об этой ошибке см. http://datatables.net/tn/4

Мой стол:

<div>
    <div class="table-responsive">
      <table id="dt-table" class="table table-striped table-bordered">
        <thead>
          <tr>
            <th>Invoice</th>
          </tr>
        </thead>

        <tbody>
          <tr>
            <td>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>

Мой JS:

var table = $('#dt-table').DataTable({});

$(document).on("click", ".button", function() {

    var inputVal = $(this).text();
    var selectVal = $('#select option:selected').val();

    $.post("/ajax/invoice.php", {find: inputVal, column: selectVal}).done(function(data){
      console.log(data)
      table.rows.add(data).draw();
    });

});

Ответ Ajax:

[{"invoice":"AZERT"},{"invoice":"JFKDH"},{"invoice":"DKHFVEP"}]

Мой запрос:

$column = $_POST['column'];

    $request = $bdd->prepare("SELECT invoice from table_master WHERE $column = :find");
    $request->execute(array(
      ':find' => $_POST['find']
      ));

    $result = $request->fetchAll(PDO::FETCH_ASSOC);

    echo json_encode($result);

Я не вижу, откуда возникла проблема, я смотрю документацию по DataTables и мой json нормально отформатирован

https://datatables.net/reference/api/rows.add()

Answer 1

Я не знаком с php, но столкнулся с той же проблемой, когда пытался обновить некоторые ячейки по щелчку строки в модальном всплывающем окне. В итоге я установил свойства данных в моем обратном вызове. Я также должен был уничтожить свой стол перед его воссозданием. Вот мой обратный вызов функции LoadData:

         .done(function (result) {
                if (result.isError) {
                    window.location.href = result.newUrl;
                }
                else {
                    var html = '';
                    $('#searchTable').dataTable().fnDestroy();
                    $('#searchTableBody').empty();

                    if (result.TransactionDetails.lenght == 0) {
                        html += '<tr><td>No Records Found</td></tr>';
                    }
                    else {

                        $.each(result.TransactionDetails, function (i, item) {

                            html += '<tr><td id="hiddenIdentifier" >' + item.x + '</td><td>' + item.y + '</td><td>' + item.z + '</td><td style="width: 10%" >' + item.a + '</td><td style="width: 30%">' + item.b + '</td><td>' + item.c + '</td><td style="width: 50%">' + item.d + '</td><td style="width: 80%"><input type="button" data-toggle="modal" data-target="#detailsModal" class="table-btn" id="btnViewDetails" value="View Details" /><input type="button" id="btnEditAmt" data-toggle="modal" class="table-btn" data-target="#amtModal" value="Edit Amount" /></td></tr>';
                        });
                    }
                    $('#searchTableBody').append(html);

                    var table = $('#searchTable').DataTable({
                        searching: false,
                        paging: true,
                        columnDefs: [
                            {
                                "targets": [0],
                                "visible": false,
                                "searchable": false
                            },
                            {
                                "targets": [1],
                                "visible": true,
                                "searchable": true
                            },
                            {
                                "targets": [7],
                                "orderable": false
                            }
                        ]
                    })

                    $('#searchTable').show();
                    $('#loaderLoadData').fadeOut();
                }

        })

Это работало только через вызовы API. fnDestroy () является ключевым. Убедитесь, что вы уничтожили его, прежде чем воссоздать его. Также обратите внимание, что я установил свойства DataTable внутри готовой функции.

Answer 2

Вам нужно указать, что вы будете использовать параметр invoice в качестве источника столбца, например:

var table = $('#dt-table').DataTable({"columns":[{ "data": "invoice"}]});