Sắp xếp bảng sau khi chèn dữ liệu với SignalR

Question

Tôi đang sử dụng SignalR để đẩy dữ liệu vào bảng khi được tạo.

Sắp xếp của tôi trong bảng dường như không hoạt động.

Đây là Mã jquery của tôi:

$(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>

Khi tôi gỡ lỗi cách tôi nghĩ Jquery, Nó cho biết thêm tr nhưng và nó gọi là sortTable() nhưng nó không sắp xếp nó chữ cái.

Tôi dường như không thể tìm ra vấn đề, và đó là lý do tại sao tôi hy vọng ai đó có thể giúp tôi.

Answer 1

Để sắp xếp bảng ngay từ đầu, bạn chỉ cần gọi sortTable một lần. Trong đoạn mã được cập nhật mà bạn đã cung cấp, việc sắp xếp sẽ hoạt động ngay sau khi bạn nhấp vào nút "thêm", ngoại trừ nó không sắp xếp hàng mới được thêm chính xác.

Vấn đề ở đây là khoảng trống phía trước các mục nhập, vì vậy bạn phải sử dụng $.trim() để xóa bất kỳ dấu cách hàng đầu hoặc cuối nào khỏi các chuỗi. Tôi cũng đã lưu văn bản của bạn vào các biến địa phương để làm cho mã rõ ràng hơn.

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

chọn của bạn $('td:first', a) sẽ trả lại <td> tế bào - bao gồm cả thức ăn đường (text node).
Cuộc gọi .text() sau đó sẽ trả về văn bản của thẻ <a /> mà còn là nguồn cấp dữ liệu dòng từ nút văn bản trước đó.

Văn bản được thêm không có nguồn cấp dữ liệu dòng. Vì vậy, ký tự đầu tiên trong so sánh là nguồn cấp dữ liệu dòng (10) so với ký tự có thể in (> 65). Do đó, văn bản được thêm vào sẽ luôn ở cuối bảng.

Thay đổi bộ chọn để tìm nạp trực tiếp thẻ <a /> thay vào đó và sắp xếp sẽ hoạt động.

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>