尽管有很好的格式Json（DataTables），但不能向我的表中添加行

Question

我想用一个AJax请求填充一个表（DataTables

我的请求ajax返回Json，但不可能填满表，我有以下错误:

DataTables警告:table ID=DT-Table-为第1行第0列请求未知参数“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，但是当我试图从一个模式弹出窗口更新行点击上的一些单元格时，我遇到了同样的问题。最后，我在post回调中设置了datatable属性。在重新创建表之前，我还必须销毁它。下面是我的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()是关键。在重新创建它之前一定要销毁它。还要注意，我在done函数内部设置了DataTable属性。

Answer 2

您需要将 参数定义为列源，如:

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