[英]How to rerender data in a javascript table orderd by a specific column
通過javascript,我在表中為代理生成行。 每行代表一個代理。 在此之后,我收到實時數據以更新列。 我有一個名為 (Calls) 的列,我需要通過調用(根據收到的數據進行實時更新)降序對代理進行排序。 例子
agents ----- calls Sam ---------13 Al ---------12 Sara---------8
如果 Sara 按時間獲得的數據最多,那么她將是第一個。
agents -------calls Sara----------15 Sam ----------13 Al------------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);
}
}
希望您將使用 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);
});
}
屬性是 json 對象屬性(這里應該是調用),您需要根據它對 .
將 false 傳遞給 ' asc ' 以降序排序。
使用結果 json 對象分配sampleTableObject並調用 sortTable() 。 然后使用排序后的對象來建表。
查看您需要的實時樣本。 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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.