DataTable, который запускает onclick, не рисуя данные, которые находятся в ответе ajax

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>