Quantcast
Channel: Recent Discussions — DataTables forums
Viewing all articles
Browse latest Browse all 82475

How to refresh table properly?

$
0
0

I am trying to create a table which calls an api every x seconds.I am trying 2 methods. 1st is the setInterval( function () which when run, works first time but on the update, I get an invalid json response warning and the table does not update.
The second method, updates the table but adds an extra row of each item on each update. What I am after is to refresh the table. What am I doing wrong?
Code for setInterval

$(document).ready(function() {
    //setTimeout(fetchdata,5000);
    var table = $('#example').DataTable({
        
        columns: [
            { data: 'name' },
            { data: 'price'},
            { data: 'initialprice'},
            { data: 'high'},
            { data: 'low'},
            { data: 'volume'},
            { data: 'bid'},
            { data: 'ask'}
            ],
            "columnDefs": [
            //{ "visible": false, "targets": 0 } // can hide columns with this..
            ],
                rowGroup: {dataSrc: 5},
                    //"displayLength": 15,
                    "order": [[ 0, 'asc' ]], // Sort Order
                    //  orderFixed: [[0, 'asc']],
                   
                    "drawCallback": function ( settings ) {
                    var api = this.api();
                    var rows = api.rows( {page:'current'} ).nodes();
                    var last=null;
 
                    api.column(0, {page:'current'} ).data().each( function ( group, i ) {
                    group = (group.substr(group.length0,3)); // Substring BTC
                    if ( last !== group) {
                    $(rows).eq( i ).before(
                        '<tr class="group"><td colspan="1">'+group+'</td></tr>'
                    );
 
                    last = group;
                }
            } );
        }
    } );
        $.ajax({
        url: "https://tradeogre.com/api/v1/markets",
        type: 'get',
        dataType: 'json',
        success: function(data){
        // Perform operation on return value
                var dt_data = [];
      
                for (var i=0; i<data.length; i++) {
                  var coin_name = Object.keys(data[i])[0];
                  var market = data[i][coin_name];
                  
                  market.name = coin_name;
                  dt_data.push(market);
                }  
            console.log(dt_data);
            table.rows.add( dt_data ).draw();
        }
        });
        setInterval( function () {
        table.ajax.reload();
        }, 30000 );
});

Code for second method.

$(document).ready(function() {
setTimeout(fetchdata,5000);
    var table = $('#example').DataTable({
        
        columns: [
            { data: 'name' },
            { data: 'price'},
            { data: 'initialprice'},
            { data: 'high'},
            { data: 'low'},
            { data: 'volume'},
            { data: 'bid'},
            { data: 'ask'}
            ],
            "columnDefs": [
            //{ "visible": false, "targets": 0 } // can hide columns with this..
            ],
                rowGroup: {dataSrc: 5},
                    //"displayLength": 15,
                    "order": [[ 0, 'asc' ]], // Sort Order
                    //  orderFixed: [[0, 'asc']],
                   
                    "drawCallback": function ( settings ) {
                    var api = this.api();
                    var rows = api.rows( {page:'current'} ).nodes();
                    var last=null;
 
                    api.column(0, {page:'current'} ).data().each( function ( group, i ) {
                    group = (group.substr(group.length0,3)); // Substring BTC
                    if ( last !== group) {
                    $(rows).eq( i ).before(
                        '<tr class="group"><td colspan="1">'+group+'</td></tr>'
                        //$('table.display').dataTable();
                    );
 
                    last = group;
                }
            } );
        }
    } );
    
    function fetchdata(){
        $.ajax({
        url: "https://tradeogre.com/api/v1/markets",
        type: 'get',
        dataType: 'json',
        success: function(data){
        // Perform operation on return value
                var dt_data = [];
      
                for (var i=0; i<data.length; i++) {
                  var coin_name = Object.keys(data[i])[0];
                  var market = data[i][coin_name];
                  
                  market.name = coin_name;
                  dt_data.push(market);
                }  
            console.log(dt_data);
            table.rows.add( dt_data ).draw();
        },
        complete:function(data){
        setTimeout(fetchdata,5000);
        
        }
        });
    }
});

Thank you


Viewing all articles
Browse latest Browse all 82475

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>