用SignalR插入數據後排序表

Question

我使用SignalR在創建表時將數據推送到表中。

我在表中排序似乎沒有工作。

這是我的jQuery代碼：

$(function() { 
    var chat = $.connection.runnerHub; 
    chat.client.refreshTable = function (table) { 
     $('table:last').after('<table id="' + table + '"><thead><tr><td>' + table + '</td></tr></thead><tbody></table>') 

    }; 
    chat.client.refreshSubTable = function (table, categoryName) { 
     if ($('#' + table + ' tbody tr').length > 0) { 
      $('#' + table + ' tbody tr:last').after("<tr><td><a href='/Forum/" + table + "/" + categoryName + "' >" + categoryName + "</a></td></tr>") 

     } else { 
      $('#' + table + ' tbody').append("<tr><td><a href='/Forum/" + table + "/" + categoryName + "' >" + categoryName + "</a></td></tr>") 
     } 
     sortTable($('#' + table), 'asc'); 
    }; 
    $.connection.hub.start().done(function() { 

    }); 
}); 

function sortTable(table, order) { 
 
    var asc = order === 'asc', 
 
    tbody = table.find('tbody'); 
 

 
    tbody.find('tr').sort(function(a, b) { 
 
    if (asc) { 
 
     return $('td:first', a).text().localeCompare($('td:first', b).text()); 
 
    } else { 
 
     return $('td:first', b).text().localeCompare($('td:first', a).text()); 
 
    } 
 
    }).appendTo(tbody); 
 
} 
 

 

 
$('.add').click(function() { 
 
    $('#Class > tbody').append("<tr><td><a href=/Forum/Class/Run>run</a></td></tr>") 
 
    sortTable($('#Class'), 'asc'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="Class"> 
 
    <thead> 
 
    <tr> 
 
     <td>Class</td> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td> 
 
     <a href="/Forum/Class/Druid">Druid</a> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <a href="/Forum/Class/Hunter">Hunter</a> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <a href="/Forum/Class/Paladin">Paladin</a> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <a href="/Forum/Class/Mage">Mage</a> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <a href="/Forum/Class/Priest">Priest</a> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <a href="/Forum/Class/Rogue">Rogue</a> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <a href="/Forum/Class/Shaman">Shaman</a> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <a href="/Forum/Class/Warlock">Warlock</a> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <a href="/Forum/Class/Warrior">Warrior</a> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 

 
<button class="add"> add </button>

當調試我這樣想過Jquery的，它增加了tr但並調用sortTable()但排序不就按字母順序排列。

我似乎無法找到問題，這就是爲什麼我希望有人能幫助我。

Answer 1

爲了從頭開始排序表，您只需要撥打sortTable一次。在您提供的更新代碼片段中，只要單擊「添加」按鈕，排序就會起作用，除非它不能正確地對新添加的行進行排序。

這裏的問題是條目前面的空格，所以您必須使用$.trim()以刪除字符串中的任何前導或尾隨空格。我還將你的文本保存到局部變量中，以使代碼更清晰。

function sortTable(table, order) { 
 
    var asc = order === 'asc', 
 
    tbody = table.find('tbody'); 
 

 
    tbody.find('tr').sort(function(a, b) { 
 
    var atext = $.trim($('td:first', a).text()), 
 
     btext = $.trim($('td:first', b).text()); 
 
    if (asc) { 
 
     return atext.localeCompare(btext); 
 
    } else { 
 
     return btext.localeCompare(atext); 
 
    } 
 
    }).appendTo(tbody); 
 
}; 
 
sortTable($('#Class'), 'asc'); 
 

 

 
$('.add').click(function() { 
 
    $('#Class > tbody').append("<tr><td><a href=/Forum/Class/Run>run</a></td></tr>"); 
 
    sortTable($('#Class'), 'asc'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="Class"> 
 
    <thead> 
 
    <tr> 
 
     <td>Class</td> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td> 
 
     <a href="/Forum/Class/Druid">Druid</a> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <a href="/Forum/Class/Hunter">Hunter</a> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <a href="/Forum/Class/Paladin">Paladin</a> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <a href="/Forum/Class/Mage">Mage</a> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <a href="/Forum/Class/Priest">Priest</a> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <a href="/Forum/Class/Rogue">Rogue</a> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <a href="/Forum/Class/Shaman">Shaman</a> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <a href="/Forum/Class/Warlock">Warlock</a> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <a href="/Forum/Class/Warrior">Warrior</a> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 

 
<button class="add"> add </button>

Answer 2

你選擇$('td:first', a)將返回<td>細胞 - 包括換行（文本節點）。
.text()調用將返回<a />標籤的文本，還會返回文本節點之前的換行。

添加的文本沒有換行符。所以比較中的第一個字符是換行符（10）與可打印字符（> 65）。因此，添加的文本將始終停留在表格的末尾。

將選擇器更改爲直接獲取<a />標記，而排序應該工作。

function sortTable(table, order) { 
 
    var asc = order === 'asc', 
 
    tbody = table.find('tbody'); 
 

 
    tbody.find('tr').sort(function(a, b) { 
 
    if (asc) { 
 
     return $('td:first a', a).text().localeCompare($('td:first a', b).text()); 
 
    } else { 
 
     return $('td:first a', b).text().localeCompare($('td:first a', a).text()); 
 
    } 
 
    }).appendTo(tbody); 
 
} 
 

 

 
$('.add').click(function() { 
 
    $('#Class > tbody').append("<tr><td><a href=/Forum/Class/Run>run</a></td></tr>") 
 
    sortTable($('#Class'), 'asc'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="Class"> 
 
    <thead> 
 
    <tr> 
 
     <td>Class</td> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td> 
 
     <a href="/Forum/Class/Druid">Druid</a> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <a href="/Forum/Class/Hunter">Hunter</a> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <a href="/Forum/Class/Paladin">Paladin</a> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <a href="/Forum/Class/Mage">Mage</a> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <a href="/Forum/Class/Priest">Priest</a> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <a href="/Forum/Class/Rogue">Rogue</a> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <a href="/Forum/Class/Shaman">Shaman</a> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <a href="/Forum/Class/Warlock">Warlock</a> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <a href="/Forum/Class/Warrior">Warrior</a> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 

 
<button class="add"> add </button>