Datatables orderNeutral

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>
    <script src="https://cdn.datatables.net/plug-ins/1.13.5/api/order.neutral().js"></script>
  </head>

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

</html>

CSS

/* 
**Link to test case:**
Here's a JSFiddle of the problem I am having:
https://jsfiddle.net/retrospaceman/xn1y3o0d/

**Description of problem:**

When the table is loaded, we are default sorting it by the date (descending).

When loaded the order of the number column is: 1,2,3,4,5,6 which is what we want

If you sort by the suburb (ascending) column, and then sort by the date column for descending again, now the order of the number column is: 2, 1, 4, 3, 6, 5 which is NOT what we want.

I assume the issue is because some entries share the same date, but it only occurs after sorting by the suburb column (ascending).

I figured the order of the data needs to be reset to its initial state when it was loaded in before applying the date sort so that its not sorting data thats already been sorted thus resulting in the weirdness but I have not been able to accomplish it so far.

**Things I have tried:**

The order neutral plugin: https://datatables.net/plug-ins/api/order.neutral()

JSFiddle here:
Order neutral plugin test: https://jsfiddle.net/retrospaceman/8ck1rg4p/

This DOES WORK if I manually (via the JSFiddle console) execute $("#testTable").DataTable().order.neutral() after every time I sort by suburb (Note: we don't call draw because we only want to change the order in the background so its ready for the next sort).
See the JSFiddle for comments on testing manually (NOTE: JSFiddle takes a few seconds to execute the function).

But DOES NOT WORK if I try to programatically do it and I cannot for the life of me figure out why. The obvious solution is to call it after each draw where the table was sorted which I have done (See here, Order neutral plugin test: https://jsfiddle.net/retrospaceman/8ck1rg4p/).

But this instead results in the user being unable to sort more than once, after the first sort by date you can now no longer sort by date at all (the same for suburb), so programatically calling it breaks the table for some reason.

I've tried placing...

JavaScript

const testTable = $("#testTable");

customSorting();

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


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

  var tableOptions = {
    processing: true,
    data: getTableData(),
    scrollY: "500",
    scrollCollapse: true,
    paginationType: "full_numbers",
    lengthMenu: [
      // "Entries per page" options for the user
      [10, 25, 50, 100, 250, 500, -1],
      [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]], //  "Number"
        orderable: false,
      },
      {
        data: [columns[2]], //  "Suburb"
      },
    ],
    order: [
      [0, "desc"]
    ],
    /**
     * Note: Comment out drawCallback to test manually
     *
     * After sorting by suburb (ascending)
     * If we sort by date (descending), the number column order is: 2,1,4,3,6,5
     * which is not what we want, we want the order to be: 1,2,3,4,5,6
     *
     * Solution attempt: order.neutral()
     *
     * After sorting by suburb (ascending)
     * run this in the JSFiddle console (It may take a few seconds to process, please wait):
     * $("#testTable").DataTable().order.neutral();
     *
     * You will notice that if you now sort by Date (descending)
     * Theres is no more weirdness with the number column order,
     * the order is 1,2,3,4,5,6 which is what we want.
     *
     *	If we attempt to progrmatically do this with drawCallback, its breaks the tables
     * ability to sort (you can only sort once per coulmn, every attempt after fails).
     * 
     * Note: Comment out drawCallback to test manually.
    ...