使用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 () {

    });
});

＆＃13;

＆＃13;

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');
});

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

当我调试我的方式时，想到了Jquery，它添加了tr，但它调用了sortTable()，但它不按字母顺序排序。

我似乎无法找到问题，这就是为什么我希望有人可以帮助我。

Answer 1

要从一开始就对表格进行排序，您只需拨打$.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>

from __future__ import print_function
import pandas as pd
import numpy as np
import scipy as sp
import scipy.optimize as opt
import scipy.stats
import matplotlib.pyplot as plt

    values = np.random.pareto(1.5, 10000)
    loc = values.min()
    scale = 1


    def cost_function(alpha):
        cost = -sp.stats.pareto(alpha, loc=loc, scale=scale).pdf(values)
        return cost.sum()

    opt_res = opt.fmin(cost_function, 1.5)

    alpha_fit_v = sp.stats.pareto.fit(values, floc=loc, fscale=scale)


    print('opt_res = ', opt_res,
          ' alpha_fit_v = ', alpha_fit_v)

Answer 2

您的选择器$('td:first', a)将返回<td>单元格 - 包括换行符（文本节点）。
然后，.text()调用将返回<a />标记的文本，但也会返回之前文本节点的换行符。

添加的文字没有换行符。因此，比较中的第一个字符是换行符（10）与可打印字符（＆gt; 65）。因此，添加的文本将始终保留在表格的末尾。

更改选择器以直接获取<a />标记，排序应该有效。

＆＃13;

＆＃13;

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');
});

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;