How to rerender data in a javascript table orderd by a specific column

Question

By javascript I generate rows for Agents in a table. every row represent an agent. after this I receive live data to update the columns. I have a column called (Calls) and i need to order the agents by calls (live update depending on received data) descending. example

agents ----- calls
Sam ---------13
Al  ---------12
Sara---------8

if Sara got the most data by time then she'll be the first.

agents -------calls
Sara----------15
Sam ----------13
Al------------12

and so on ..

this is my row rendering

var $agentRow = '<tr id="agentRow_' + agentId + '"><th scope="row">' + agentName + '</th><td class="calls" id="agentCalls_' + agentId + '">' + outTotalCalls +
            '</td><td class="minutes" id="agentMinutes_' + agentId + '">' +
            outCallMinutes + '</td>' +
            '<td class="averages" id="agentAverage_' + agentId + '">' + averageOutCallTime + '</td></tr>';

    //if $agentRow exists invoke setIncomingValuesToAgentsFields else append it to the table
    if ($('#agentRow_' + agentId).length) {
        setIncomingValuesToAgentsFields('#agentCalls_' + agentId, outTotalCalls);
        setIncomingValuesToAgentsFields('#agentMinutes_' + agentId, outCallMinutes);
        setIncomingValuesToAgentsFields('#agentAverage_' + agentId, averageOutCallTime);
    } else {
        $('#agentsTable').append($agentRow);
    }


function setIncomingValuesToAgentsFields(elementId, inComingValue) {
    var currentElementValue = 0;
    if ($(elementId).text() !== "") {
        currentElementValue = $(elementId).text();
        currentElementValue = parseFloat(currentElementValue);
        currentElementValue += inComingValue;
        $(elementId).text(currentElementValue);
    } else {
        $(elementId).text(currentElementValue);
    }
}

Answer 1

Hope you will be getting data from server using Ajax call . So If your having the result data in JSON object , then you can sort the data to find out which is having highest value . The follwing functon will help us to sort the data

sortTable:function (property,asc)
{
    sampleTableObject = sampleTableObject.sort(function(a, b) {
        if (asc) return (a[property] > b[property]) ? 1 : ((a[property] < b[property]) ? -1 : 0);
        else return (b[property] > a[property]) ? 1 : ((b[property] < a[property]) ? -1 : 0);
    });     
}

property is the json object property (here it should be calls) based on which you need to sort .

Pass false to ' asc ' to sort in descending order.

Assign sampleTableObject with the result json object and call sortTable() . Then use the sorted object to build the table.

Answer 2

See the live sample of what you need. After 3 second Al calls become 14, and table rows will be sorted again.

 var agents = [ { name: 'Sara', calls : 15 }, { name: 'Sam', calls : 13 }, { name: 'Al', calls : 12 } ]; function to_row(obj){ var tr = $('<tr></tr>'); tr.data('obj', obj); $('<td>'+obj.name+'</td>').appendTo(tr); $('<td>'+obj.calls+'</td>').appendTo(tr); return tr; } function table_update(obj){ $('#table tr').each(function(){ var t=$(this); var o=t.data('obj'); if(o.name==obj.name){ t.remove(); }; if(o.calls>obj.calls){ to_row(obj).insertAfter(t); } return t.data('obj'); }) } agents.sort(function(x,y){ return y.calls - x.calls; }).forEach(function(o){ to_row(o).appendTo( $('#table') ); }); setTimeout(function(){ table_update( { name: 'Al', calls : 14 } ); }, 3000);

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table id="table"> </table>