Сортировка таблицы после вставки данных с помощью 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() но DonT сортировать его алфавитный.

Кажется, я не могу найти проблему, и поэтому я надеюсь, что кто-то может мне помочь.

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>