DataTables seems to sort before Javascript replaces data

AndrewZorn

I'm using DataTables to make a sortable table on a page (duh).

A script runs that goes through the HTML and replaces placeholder items with new/updated values every second. So at first, instead of numbers, there are merely alphanumeric strings in my table.

Everything was working fine when I copy and pasted these placeholders hundreds of times in

<

table><tr><td> format. Then I learned how to initalize the the data into a var matrix with a Javascript loop.

This is almost perfect, but now, when I sort by a certain column, it doesn't sort the data currently onscreen. Based on the way the leftmost column is always in ascending or descending order, no matter which data column you sort, I'm guessing DataTables is sorting by the placeholders rather than the data which is substituted.

My question is mostly conceptual; is there any way typing out individual placeholders in a table allow DataTables to work, but initializing a matrix messes up the sorting?

In the code below, a list of 10 power inverters is created. Each field is populated by something like "dynaV151e", and that is what gets replaced by outside code.

<script>
    var numInverters=10;
    
    var inverterMatrix = [];
    for (var i=2; i<=numInverters; i++)
    {
        inverterMatrix[i-2] = [];

        inverterMatrix[i-2][0] = i-1;
        inverterMatrix[i-2][1] = 'dynaV15'+('0' + i.toString(16)).substr(-2);
        inverterMatrix[i-2][2] = 'dynaV16'+('0' + i.toString(16)).substr(-2);
        inverterMatrix[i-2][3] = 'dynaV17'+('0' + i.toString(16)).substr(-2);
        inverterMatrix[i-2][4] = 'dynaV18'+('0' + i.toString(16)).substr(-2);
        inverterMatrix[i-2][5] = 'dynaV19'+('0' + i.toString(16)).substr(-2);
        inverterMatrix[i-2][6] = 'dynaV1b'+('0' + i.toString(16)).substr(-2);
        inverterMatrix[i-2][7] = 'dynaV1d'+('0' + i.toString(16)).substr(-2);
        inverterMatrix[i-2][8] = 'dynaV1f'+('0' + i.toString(16)).substr(-2);
    }

    $(document).ready(function() {
        $('#inverterTable').html( '<table class="display" id="inverterDataTable"></table>' );
             
        $('#inverterDataTable').dataTable( {
            "data": inverterMatrix,
            "columns": [
                { "title": "1" },
                { "title": "2" },
                { "title": "3" },
                { "title": "4" },
                { "title": "5" },
                { "title": "6" },
                { "title": "7" },
                { "title": "8" },
                { "title": "9" },
            ],
            "lengthMenu": [[-1,10,50], ["All",10,50]],
            "bFilter":false
        } );   
    } );
</script>

<div class="full">
    <table id="inverterDataTable" class="display"></table>  
</div>

And here's the old way, with a table, that I don't want to do because it is awful (but worked with sorting):

<table id="aaaa" class="display">
    <thead>
        <tr>
            <th>1</th>
            <th>2</th>
            <th>3</th>
            <th>4</th>
            <th>5</th>
            <th>6</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>01</td>
            <td>dynaV0001</td>
            <td>223</td>
            <td>95</td>
            <td>53</td>
            <td>0</td>
        </tr>
        <tr>
            <td>02</td>
            <td>dynaV0002</td>
            <td>132</td>
            <td>78</td>
            <td>51</td>
            <td>0</td>
        </tr>
        <tr>
            <td>03</td>
            <td>dynaV0003</td>
            <td>232</td>
            <td>178</td>
            <td>33</td>
            <td>2</td>
        </tr>