Identical table working perfect on one page, won't work anyplace else

northcutt

Link to test case (Working): https://roi.fyi/crypto/

Link to test case (Problems): https://roi.fyi/simple/

Description of problem: I hesitate to even post this because I know it's got to be dead-simple, but I've been beating my head against the walls on this one for days now and would greatly appreciate a second eye...

At the first link (crypto), I have a table that works perfectly in the SPREADSHEET tab. Evidenced by export buttons appearing and no search form. I can manipulate it using rows.add() with no errors.

At the second link (simple, or any other page), nothing works. Buttons don't appear, search form does, get errors when using rows.add(). Error reads: _DataTables warning: table id=rawTable - Requested unknown parameter '0' for row 0, column 0. For more information about this error, please see http://datatables.net/tn/4_. Same HTML, same JS, same script location inside document.ready, same DT library and CSS references all verified in the source.

Here's how it's declared:

jQuery('#rawTable').DataTable({

    // Configure
    "responsive": true,
    "paging": false,
    "searching": false,
    "retrieve": true,

    // Export options
    "dom": 'Bfrtip',
    "buttons": [
        'copy', 'csv', 'excel'
    ],

    // Define columns
    columns: [
        { data: 'date' },
        { data: 'value'}
    ],
    "columnDefs": [
        { 
        "targets": 1,
        "type": "num-fmt",
        }
    ]
});

kthorngren

When the simple page loads it is hitting this code first in calc.js:

This is initializing a default Datatable. Then you are hittin gthe code above with retrieve set to true. So it doesn't read the config but uses the original Datatables init code. Not sure what the goal of the function in calc.js is but you probably need to rearrange the order so the above is executed first. Not sure though as I don't know your solution.

Requested unknown parameter

Could be related to the above as the default Datatable uses array data. But you have columns.data to object data in the above table.

Kevin

northcutt

Thanks Kevin, so I...

• Moved "retrieve" param out of the main table declaration and into the calc.js function. No change.

• Tested your theory of the loadRawData() function getting called in the wrong order by adding a 5 second "await" promise to that function.

Now it's all working. So I guess the calc.js function was just getting called before the table got declared.

What made that bizarre (to me) is that all of that all of the above is the same on all pages. But I guess the fact that the crypto page is awaiting an API and/or DB call made it just slightly slower, and therefore, made it an accidental success.

kthorngren

If you want to guarantee that your loadRawData() function runs after Datatables initialization you can call it in initComplete.

Kevin

northcutt

Amazing! Thanks again.