使用 SignalR 插入数据后排序 table

Question

我正在使用 SignalR 在创建数据时将数据推送到 table 中。

我在 table 中的排序似乎不起作用。

这是我的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

为了从头开始对 table 进行排序，您只需调用 sortTable 一次。在您提供的更新代码段中，只要您单击 "add" 按钮，排序就会起作用，只是它不会对新添加的行进行正确排序。

这里的问题是条目前面的空格，因此您必须使用 $.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) 将 return <td> 单元格 - 包括换行符（文本节点）。
然后 .text() 调用将 return <a /> 标记的文本以及它之前的文本节点的换行符。

添加的文字没有换行。因此比较中的第一个字符是换行符 (10) 与 printable 字符 (>65)。因此，添加的文本将始终保留在 table.

的末尾

将选择器更改为直接获取 <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>

使用 SignalR 插入数据后排序 table

Sorting table after inserting data with SignalR

jquery

signalr