Sorting not working past column 2

bruceleeon

Column sorting isn't working past column 2, I even tried deleting the column just in case the % sign was throwing it off.

https://codpool.com

        <table id="sortthisbitch" width="100%">
        <thead>
        <tr>
            <th class="all"><strong> Pool</strong></th>
            <th class="all"><strong> Algo</strong></th>
            <th class="desktop"><strong> Pool Fee</strong></th>
            <th class="all"><strong> Active Miners</strong></th>
            <!--<th><strong> Symbol</strong></th>-->
            <th class="all"><strong> Workers</strong></th>
            <th class="all"><strong> Pool Hashrate</strong></th>
            <th class="desktop"><strong> Network Hashrate</strong></th>
            <th class="desktop"><strong> % of Network Hash</strong></th>
            <th class="desktop"><strong> Total Blocks Found</strong></th>
            <th class="desktop"><strong> Difficulty</strong></th>
            <th class="all"><strong> Block Height</strong></th>
            <th class="all"><strong> Effort</strong></th>
            <!--<th><strong> Price (USD)</strong></th>-->
            <th class="all"><strong> </strong></th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td width="100px"><img src="/images/smallcoin/arms.png" width="20px" height="20px"> 2ACoin</td>
            <td><strong>Aeon v7</strong></td>
            <td><strong><span id="arms_configcnFee">...</span></strong></td>
            <td><strong><span id="arms_poolMiners">...</span></strong></td>
            <!--<td><strong>IRD</strong></td>-->
            <td><strong><span id="arms_poolWorkers">...</span></strong></td>
            <td><strong><span id="arms_poolHashrate">...</span></strong></td>
            <td><strong><span id="arms_networkHashrate">...</span></strong></td>
            <td><strong><span id="arms_hashPower">...</span></strong></td>
            <td><strong><span id="arms_poolBlocks">...</span></strong></td>
            <td><strong><span id="arms_poolDifficulty">...</span></strong></td>
            <td><strong><span id="arms_poolBlockheight">...</span></strong></td>
            <td><strong><span id="arms_hasheffort">...</span></strong></td>
            <!--<td><strong><span id="iridiumPriceUSD">...</span></strong></td>-->
            <td><a href="https://arms.codpool.com"><div class="btn btn-success">Start Mining</div></a></td>
        </tr>
</tbody>
</table>

$(document).ready(function() {
    $('#sortthisbitch').DataTable( {
          responsive: {
            breakpoints: [
              {name: 'bigdesktop', width: Infinity},
              {name: 'meddesktop', width: 1480},
              {name: 'smalldesktop', width: 1280},
              {name: 'medium', width: 1188},
              {name: 'tabletl', width: 1024},
              {name: 'btwtabllandp', width: 848},
              {name: 'tabletp', width: 768},
              {name: 'mobilel', width: 480},
              {name: 'mobilep', width: 320}
            ],
            columnDefs: [
                { responsivePriority: 1, targets: 0 },
                { responsivePriority: 2, targets: -1 }
            ]
          },
        //"responsive": false,
        "paging":   false,
        "aoColumnDefs": [{'bSortable': false, 'aTargets': [ -1 ]}],
        "orderCellsTop": true       
    } );
} );

kthorngren

I might be missing something but it looks like there is just ... in each column except the first 2. Datatables sort icons change but its all the same data from what I can see. Is there something that needs to be done to populate the table?

Kevin

bruceleeon

You must be on a corporate network, the information in the ... is populated via javascript pulling information from non-standard ports

kthorngren

That does make a difference

I didn't look through your code in detail but it looks like the initial data the Datatables sees is with the ellipsis. You must be retrieving and populating the rest of the data outside of Datatables. Meaning you are updating the table directly and not through Datatable's APIs. If this is the case then Datatables doesn't know about the changes. You can use rows().invalidate() once the table update is complete to have Datatables refresh its data cache with the new data.

Kevin

tangerine

Have you done any debugging? Browser console errors at your site include "jquery.dataTables.js - 404 not found" and "dataTables.numericComma.js - 404 not found".

bruceleeon

Hrmm... didn't realize it, but starting at column 2, the data is pulled from the various apis. I had used a different table sorting method, which worked, but it worked after the table was rendered

bruceleeon

those two are fixed, they were calls to a datatables plugin that I was trying. Those two are gone @tangerine

bruceleeon

@kthorngren How do I make that happen? I tried copying from the example listed at your link

//Datatables
$(document).ready(function() {
    var table = $('#sortthisbitch').DataTable( {
          responsive: {
            breakpoints: [
              {name: 'bigdesktop', width: Infinity},
              {name: 'meddesktop', width: 1480},
              {name: 'smalldesktop', width: 1280},
              {name: 'medium', width: 1188},
              {name: 'tabletl', width: 1024},
              {name: 'btwtabllandp', width: 848},
              {name: 'tabletp', width: 768},
              {name: 'mobilel', width: 480},
              {name: 'mobilep', width: 320}
            ],
            columnDefs: [
                { responsivePriority: 1, targets: 0 },
                { responsivePriority: 2, targets: -1 }
            ]
          },
        //"responsive": false,
        "paging":   false,
        "aoColumnDefs": [{'bSortable': false, 'aTargets': [ -1 ]}],
        "orderCellsTop": true,
        "columnDefs": [
            { "type": "percent", targets: 2 }
        ]       
    } );
} );
// Invalidate and redraw all rows
table
    .rows( tr )
    .invalidate()
    .draw();

Still doesn't work though

bruceleeon

This is what I used before I found datatables https://www.kryogenix.org/code/browser/sorttable/

bruceleeon

I've reverted back to that so you can see the functionality

kthorngren

That is not the right place for invalidate(). It needs to be used after you update the data. Looks like you are continuously updating the table using the updatePools() function. It calls getPoolStats() which calls a function to update the table:

    updateText(poolID + '_poolHashrate', poolHashrate);
    updateText(poolID + '_poolMiners', poolMiners);
    updateText(poolID + '_poolWorkers', poolWorkers);
    updateText(poolID + '_networkHashrate', networkHashrate);
    updateText(poolID + '_hashPower', hashPower);
    updateText(poolID + '_poolBlocks', poolBlocks);
    updateText(poolID + '_poolDifficulty', poolDifficulty);
    updateText(poolID + '_poolBlockheight', poolBlockheight);
    updateText(poolID + '_configcnAlgorithm', configcnAlgorithm);
    updateText(poolID + '_configcnFee', configcnFee);
    updateText(poolID + '_hasheffort', hasheffort);

After this is where I would place the invalidate function. Maybe you can do something like this after those function calls:

var tr = $(poolID + '_poolHashrate').closest('tr');  // get the TR 
// Invalidate and redraw all rows
table
    .row( tr )
    .invalidate()
    .draw();

Notice row is singular. Hopefully this code will refresh just the one row.

Kevin

kthorngren

Just looked at the other example. Thanks. The problem is Datatables doesn't keep track of DOM changes so you need to tell it or use its API's. You could possible make the code more efficient by using row().data() to update the row. It would eliminate the calls to updateText and invalidate.

Maybe something like this:

var tr = $(poolID + '_poolHashrate').closest('tr');  // get the TR

table.row( tr ).data( [poolHashrate, poolMiners ... hasheffort] ).draw();

If tr is the correct row you could just simply update the row data with an array of the new data.

Kevin

bruceleeon

it only draws it for one row then, ugh, what a pain!!! lol. I think I am going to go back to sortable, it just works. lol

kthorngren

I put together a simple example from your page:
http://jsfiddle.net/xb2gtfd5/1/

I used this code in the getPoolStats() function:

  var table = $('#sortthisbitch').DataTable();
  var tr = $('#' + poolID + '_poolHashrate').closest('tr');
  table.row(tr).invalidate().draw();

Needed to make a couple adjustments from the original code I posted. Needed to get the API instance into table and needed to add # for the jQuery ID selector.

I like the table ID you used This seems to work. Hope it works ok in your page.

I was going to try row().data() but found it would be more tricky to work with. Could be done though.

Kevin

bruceleeon

YOUDAMAN!!! It works, I went back to datatables! Now I have to figure out buttons

bruceleeon

you have a patreaon or something? Someway I can send you a little "thank you"

kthorngren

No, I don't have anything like that. There is no need to send a "thank you" although I appreciate it. Happy to help out. I didn't spend a lot of time on it so not a problem.

Kevin