DataTable that fires onclick not drawing data that is in the ajax response

Question

I have a DataTable that retrieves the data for the table on an onclick event.

It is working how intended, I can see the response firing in the background, and there is data in the response - however, it's not being loaded into the table.

.draw();

Appears to be the issue... had a look on the forum, tried solutions i can find but nothing seems to be working...

JS below.

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();
});
});

EDIT TO ADD 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>

EDIT 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

Your issue is probably coming from the columns.data option.

When you specify "data": "ReturnedData" for a column, the datatable will search the content to display in result[x].ReturnedData, and as you haven't this key in your data (you have only result[x].ReturnedDataX keys), it displays nothing.

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>