I’m encountering an issue with jQuery DataTables where dynamically added rows do not display correctly when I include a data-order attribute for sorting. The rows are added via JavaScript, and while the action buttons are visible, the date column with the data-order attribute does not show up.

More important, I get the error: “DataTables warning: table id=example – Requested unknown parameter ‘[object Object]’ for row 4, column 0. For more information about this error, please see http://datatables.net/tn/4” when I click on Add Row.

I have a demonstration here:

<table id="example" class="display" cellspacing="0" width="100%">
  <thead>
    <tr>
      <th>Date</th>
      <th>Actions</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td data-order="1714043746">November 2024</td>
      <td><button>
          Edit
        </button></td>
    </tr>
    <tr>
      <td data-order="1714043745">October 2024</td>
      <td><button>
          Edit
        </button></td>
    </tr>
    <tr>
      <td data-order="1714043744">Mai 2024</td>
      <td><button>
          Edit
        </button></td>
    </tr>

  </tbody>
</table>
<button id="add">
  Add row
</button>

$(document).ready(function() {
  let myTable = $('#example').DataTable({
    responsive: true
  });

  $('#add').on('click', function() {
    var response = {
      data: [
        'Nov 2016',
        '<button>Edit</button>'
      ]
    };
    myTable.row.add(response.data).draw(false);
  })
});

https://jsfiddle.net/9fpj5y0c/

If I remove the data-order attribute, then it’s working fine. I need to make this work with data-order, because I need to be able to sort correctly the column.