DataTables auto updates 1

DataTables Examples

by Richard

HTML

<script src="//cdn.datatables.net/1.10.5/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.5/css/jquery.dataTables.min.css">
<script src="http://www.bitstorm.org/jquery/color-animation/jquery.animate-colors.js"></script>
<table class="dataTable" id="example">
    <thead>
        <tr><th>id</th><th>timestamp</th></tr>
    </thead>
    <tbody>
  
    </tbody>
</table>

<!-- from https://datatables.net/forums/discussion/26097/demo-of-live-changes-to-a-table-such-as-could-be-done-via-websockets-->

JavaScript

$(document).ready(function() {
    
    var dt1 = $('#example').DataTable({
        paging: true,
        //ordering: false,
        //orderFixed: [0, 'asc'],
        searching: false,
        lengthChange: false,
        //displayStart: 5,
    });
    
    // Start with a few rows
    for (var i = 0; i < 5; i++) {
        addRow();
    }
    
    // Make random additions, updates, 
    // and deletions
    var intervals = [];
    intervals.push(setInterval(addRow,    4000));
    intervals.push(setInterval(updateRow, 2500));
    intervals.push(setInterval(deleteRow, 6000));
    function stopIt () { 
        intervals.forEach(function(i) {
            clearInterval(i); 
        });
    }
    setTimeout(stopIt, 40000);
    
    function addRow() {
        var id =  randomInt(100);
        var ts = timestamp(); 
        var rowNode = dt1
            .row.add([id, ts])
            .draw(false)
            .node();
        $(rowNode)
            .css({backgroundColor: 'green'})
            .animate({backgroundColor: 'white'}, 2500);
    }
    
    function updateRow() {
        var rowNum = randomRow();
        var row = dt1.row(randomRow());
        // update the second cell i.e. no. 1
        // draw() only matters if sorting
        // by the updated column
        var cellNode = dt1.cell(rowNum, 1)
            .data(timestamp)
            .draw(false)
            .node();
        $(cellNode)
            .css({backgroundColor: 'blue'})
            .animate({backgroundColor: 'white'}, 2500);
    }
    
    function deleteRow() {
        var row = dt1.row(randomRow());
        var rowNode = row.node();
        $(rowNode)
            .css({backgroundColor: 'red'})
            .animate({backgroundColor: 'black'}, 2500,
                function() {row.remove().draw(false)});
    }

    function randomRow() {
        var info = dt1.page.info();
        return randomInt(info.recordsTotal);
    }
    
    function randomInt(max) {
        return Math.floor((Math.random() *...