Question

我有一个DataTable，它在onclick事件上检索表的数据。

按预期工作，我可以在后台看到响应触发，并且响应中有数据-但是，它没有被加载到表中。

.draw();

似乎是问题所在...在论坛上看了一下，尝试了一些可以找到的解决方案，但似乎没有任何效果...

下面的JS。

var myTable = jQuery('.js-dataTable').DataTable({
dom: 'Bfrtip',
pagingType: "full_numbers",
columnDefs: [ 
    { orderable: false } 
],
buttons: [],
searching: false,
pageLength: 12,
autoWidth: false,
info:     false,
paging:   false,
columns: [
    {"data": "ReturnedData"},
    {"data": "ReturnedData"},
    {"data": "ReturnedData"},
    {"data": "ReturnedData"},
    {"data": "ReturnedData"}
],
rowCallback: function (row, data) {},
filter: false,
processing: true,
retrieve: true
});

$("#expand").on("click", function (event) {
$.ajax({
    url: 'inc/ajax/tables/cash/get-data.php',
    type: "post",
    data: { account: '123456' }
}).done(function (result) {
    myTable.clear().draw();
    myTable.rows.add(result).draw();
});
});

编辑以添加HTML：

<button id="expand" type="button" class="btn-block-option" data-toggle="block-option" data-action="content_toggle"></button>

<table class="table table-bordered table-striped table-vcenter js-dataTable">
<thead>
    <tr>
        <th>Title</th>
        <th>Title</th>
        <th>Title</th>
        <th>Title</th>
        <th>Title</th>
    </tr>
</thead>
</table>

编辑2：

data: Array(4)
0: {ReturnedData1: "Data", ReturnedData2: "Data", ReturnedData3: "Data", ReturnedData4: "Data", ReturnedData5: "Data"}
1: {ReturnedData1: "Data", ReturnedData2: "Data", ReturnedData3: "Data", ReturnedData4: "Data", ReturnedData5: "Data"}
2: {ReturnedData1: "Data", ReturnedData2: "Data", ReturnedData3: "Data", ReturnedData4: "Data", ReturnedData5: "Data"}
3: {ReturnedData1: "Data", ReturnedData2: "Data", ReturnedData3: "Data", ReturnedData4: "Data", ReturnedData5: "Data"}
length: 4
__proto__: Array(0)
__proto__: Object

Answer 1

您的问题可能来自columns.data选项。

当您为列指定"data": "ReturnedData"时，数据表将搜索要显示在result[x].ReturnedData中的内容，并且由于您的数据中没有此键（您只有result[x].ReturnedDataX键），则什么也不显示。

var myTable = jQuery('.js-dataTable').DataTable({
  dom: 'Bfrtip',
  pagingType: "full_numbers",
  columnDefs: [ 
      { orderable: false } 
  ],
  buttons: [],
  searching: false,
  pageLength: 12,
  autoWidth: false,
  info: false,
  paging: false,
  columns: [
      {"data": "ReturnedData"},
      {"data": "ReturnedData"},
      {"data": "ReturnedData"},
      {"data": "ReturnedData"},
      {"data": "ReturnedData"}
  ],
  rowCallback: function (row, data) {},
  filter: false,
  processing: true,
  retrieve: true
});

$("#expand").on("click", function (event) {
  const result = dataFromAjax();
  
  // Call ".draw()" once for performance.
  myTable.clear();
  myTable.rows.add(result).draw();
});

// Simulate ajax call
function dataFromAjax() {
  return [
    { ReturnedData: 'After' },
    { ReturnedData: 'After 2' }
  ];
}

<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>

<button id="expand" type="button" class="btn-block-option" data-toggle="block-option" data-action="content_toggle">Expand</button>

<table class="table table-bordered table-striped table-vcenter js-dataTable">
  <thead>
    <tr>
      <th>Title</th>
      <th>Title</th>
      <th>Title</th>
      <th>Title</th>
      <th>Title</th>
    </tr>
  </thead>
  
  <!-- testing purpose -->
  <tbody>
    <tr>
      <td>Test</td>
      <td>Test</td>
      <td>Test</td>
      <td>Test</td>
      <td>Test</td>
    </tr>
  </tbody>
</table>

触发onclick的DataTable不会绘制ajax响应中的数据

1 个答案: