如何重新呈现按特定列排序的javascript表中的数据

Question

通过 javascript，我为表中的代理生成行。每行代表一个代理。在此之后，我收到实时数据以更新列。我有一个名为（呼叫）的列，我需要通过呼叫（实时更新取决于收到的数据）降序对代理进行排序。例子

代理-----来电 山姆 ---------13 铝 ---------12 萨拉---------8

如果 Sara 按时间获得的数据最多，那么她将是第一个。

代理--------来电 萨拉----------15 山姆 ----------13 铝------------12

等等..

这是我的行渲染

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

查看您需要的实时示例。 3 秒后 Al 调用数变为 14，表行将重新排序。

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>

Answer 2

希望您将使用 Ajax 调用从服务器获取数据。因此，如果您在 JSON 对象中有结果数据，那么您可以对数据进行排序以找出具有最高值的数据。下面的函数将帮助我们对数据进行排序

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 是您需要排序的json对象属性（这里应该是调用）。

将 false 传递给 'asc' 以降序排序。

用 result json 对象 分配 sampleTableObject 并调用 sortTable() 。然后使用排序好的对象建表。