jquery - 使用 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>