Datatables probelm

by retrospaceman

HTML

<!DOCTYPE html>
<html>

  <head>
    <link href="https://cdn.datatables.net/1.13.5/css/jquery.dataTables.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
    <script src="https://cdn.datatables.net/1.13.5/js/jquery.dataTables.js"></script>
  </head>

  <body>
    <table id="testTable">
      <thead>
        <tr>
          <th id="table-date-header">Date</th>
          <th id="table-name-header">Name</th>
          <th id="table-suburb-header">Suburb</th>
        </tr>
      </thead>
      <tfoot>
        <tr>
          <th>Date</th>
          <th>Name</th>
          <th>Suburb</th>
        </tr>
      </tfoot>
    </table>
  </body>
  
</html>

JavaScript

const testTable = $("#testTable");

customSorting();
/* Initialize table */
testTable.dataTable(getTableOptions());

function getTableOptions() {
  const columns = ["date", "name", "suburb"];

  var tableOptions = {
    processing: true,
    data: getTableData(),
    scrollY: "500",
    scrollCollapse: true,
    paginationType: "full_numbers",
    lengthMenu: [
      // "Entries per page" options for the user
      [5, 10, 25, 50, 100, 250, 500, -1],
      [5, 10, 25, 50, 100, 250, 500, "All"],
    ],
    language: {
      search: "Search: ",
      lengthMenu: "Entries per page: _MENU_",
      processing: "",
      paginate: {
        previous: "&larr;", // Display previous as arrow: <-
        next: "&rarr;", // Display next as arrow: ->
      },
    },
    columns: [{
        data: [columns[0]], // "Date"
        type: "custom-date-sort",
      },
      {
        data: [columns[1]], //  "Name"
        orderable: false,
      },
      {
        data: [columns[2]], //  "Suburb"
      },
    ],
    order: [
      [0, "desc"]
    ],
  };

  return tableOptions;
}

function customSorting() {
  /**
   *
   * Date sorting
   *
   */
  function getMonthFromString(mon) {
    return new Date(Date.parse(mon + " 1, 2023")).getMonth() + 1; //Year doesnt matter
  }

  function formatDates(a, b) {
    var dateA = a.split("-");
    var dateB = b.split("-");

    dateA[1] = getMonthFromString(dateA[1]);
    dateB[1] = getMonthFromString(dateB[1]);

    dateA = dateA.reverse().join("-");
    dateB = dateB.reverse().join("-");

    return [dateA, dateB];
  }

  function dateSort(a, b, n = 1) {
    if (a === b) {
      return 0;
    }

    let [dateA, dateB] = formatDates(a, b);
    return (new Date(dateA) - new Date(dateB)) * n;
  }
  $.extend($.fn.dataTable.ext.type.order, {
    "custom-date-sort-asc": (a, b) => dateSort(a, b),
    "custom-date-sort-desc": (a, b) => dateSort(a, b, -1),
  });
}

function getTableData() {
  return [{
      date: "12-nov-2023",
      name: '1....