javascript - jQuery DataTable 行详细信息给出 "data is undefined"

Question

我使用 jQuery 数据表来创建包含行详细信息的数据表。 但是在按照文档中的方式实现它之后，它在 jquerydatatables.js 上给出了一个错误:

data is undefined

JavaScript 代码:

$(document).ready(function() {
  var dt = $('#tbl_cheque_history').DataTable({
    "processing": true,
    "serverSide": true,
    "ajax": "../lib/load-history.php",
    "columns": [{
        "class": "details-control",
        "orderable": false,
        "data": null,
        "defaultContent": ""
      },
      {"data": "bank_name"},
      {"data": "account_number"},
      {"data": "amount"},
      {"data": "printed_date"},
      {"data": "cheque_number"}
    ],
    "order": [[1, 'asc']]
  });

  var detailRows = [];

  $('#tbl_cheque_history tbody').on('click', 'tr td.details-control', function() {
    var tr = $(this).closest('tr');
    var row = dt.row(tr);
    var idx = $.inArray(tr.attr('id'), detailRows);

    if (row.child.isShown()) {
      tr.removeClass('details');
      row.child.hide();

      // Remove from the 'open' array
      detailRows.splice(idx, 1);
    } else {
      tr.addClass('details');
      row.child(format(row.data())).show();

      // Add to the 'open' array
      if (idx === -1) {
        detailRows.push(tr.attr('id'));
      }
    }
  });

  dt.on('draw', function() {
    $.each(detailRows, function(i, id) {
      $('#' + id + ' td.details-control').trigger('click');
    });
  });

  function format(d) {
    return '<div class="details-container">' +
      '<table cellpadding="5" cellspacing="0" border="0"   class="details-table">' +
      '<tr>' +
      '<td class="title">Person ID:</td>' +
      '<td>' + d.bank_name + '</td>' +
      '</tr>' +
      '<tr>' +
      '<td class="title">Name:</td>' +
      '<td>' + d.account_number + '</td>' +
      '<td class="title">Email:</td>' +
      '<td>' + d.amount + '</td>' +
      '</tr>' +
      '<tr>' +
      '<td class="title">Country:</td>' +
      '<td>' + d.printed_date + '</td>' +
      '<td class="title">IP Address:</td>' +
      '<td>' + d.check_number + '</td>' +
      '</tr>' +
      '</table>' +
      '</div>';
  };
});

我的PHP:

<?php
session_start();
require("connection.php");

$dbobj = new dbconnection();
$con   = $dbobj->getcon();

$sql_get_history     = "SELECT bank.bank_name, bank_account.account_no, history.language, history.payee, history.amount, history.cheque_date, history.printed_date, history.printed_time, history.cheque_no, history.crossed, history.ac_payee, history.bearer FROM history, bank_account, bank ,layout WHERE layout.layout_id = history.layout_id AND layout.bank_account_id = bank_account.account_id AND bank_account.bank_id = bank.bank_id AND history.customer_id='$_SESSION[CusID]' ORDER BY history.history_id DESC";
$res_sql_get_history = mysqli_query($con, $sql_get_history);
if (mysqli_num_rows($res_sql_get_history) > 0) {
    $array_history = array();
    while ($row_history = mysqli_fetch_array($res_sql_get_history)) {
        array_push($array_history, $row_history);
    }
    echo json_encode($array_history);
}
$dbobj->close();
?> 

HTML代码:

<table id="tbl_cheque_history" class="table table-striped table-no-bordered table-hover dataTable dtr-inline">
   <thead>
      <tr role="row">
         <th><b>Bank</b></th>
         <th><b>Account Number</b></th>
         <th><b>Amount</b></th>
         <th><b>Printed Date</b></th>
         <th><b>Check Number</b></th>
         <th><b>Actions</b></th>
      </tr>
   </thead>
</table>

我的错误:

谁能帮我实现这个？我不知道这是怎么发生的。我有很多应该出现的列，但是普通数据表空间不够，这就是我选择应用行详细信息的原因。

Answer 1

您的 php 正在输出一个普通数组，而不是 DataTables 期望的那样。 https://www.datatables.net/examples/data_sources/ajax.html

您可以设置 dataSrc 来更改 DataTables 期望您的 ajax 响应的外观。

"ajax": {
  "url": "../lib/load-history.php",
  "dataSrc": ""
}

一个空字符串使它期望一个普通数组而不是 data 下对象中的数组