Question

我想用AJax请求填充表格（DataTables）

我的请求ajax返回Json但无法填充表，我遇到此错误：

DataTables警告：表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

您需要定义要使用invoice参数作为列源，例如：

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

Answer 2

我不熟悉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属性。

尽管格式良好的Json（DataTables）无法将行添加到我的表中

2 个答案: