Question

在具有由jQuery的tablesorter排序的表的网页上，有动态向表中添加列的功能。当发生这种情况时，我调用trigger（“update”）和trigger（“appendCache”）来使tablesorter能够按新列排序（我也尝试再次调用tablesorter（））。但是，在我单击标题单元格之前，用于排序的小部件不会出现在新列中。

我的问题是，是否有人知道如何立即显示小部件？谢谢问候杰森

Answer 1

   <head>

    <title>jQuery plugin: Tablesorter 2.0</title>

    <link rel="stylesheet" href="css/jq.css" type="text/css" media="print, projection, screen" />

    <link rel="stylesheet" href="../themes/blue/style.css" type="text/css" media="print, projection, screen" />

    <script type="text/javascript" src="../jquery-latest.js"></script>

    <script type="text/javascript" src="../jquery.tablesorter.js"></script>

    <script type="text/javascript">

    $(function() {      

$(document).ready(function()
    {
        $("#myTable").tablesorter();
    }
);


    }); 
    function append(){
        var table = $("#myTable");
        $(table).remove();
        var tr = $("<tr></tr>");
        $("<td></td>").html('Test').appendTo(tr);
        $("<td></td>").html('test').appendTo(tr);
        $("<td></td>").html('test@gmail.com').appendTo(tr);
        $("<td></td>").html('$5.00').appendTo(tr);
        $("<td></td>").html('http://www.test.com').appendTo(tr);
        $(tr).appendTo(table);
        $(table).appendTo($('#tableholer'));
        $("#tableholer table").tablesorter();
    }

    </script>

</head>
<body>
    <div id="tableholer">
    <table id="myTable" class="tablesorter">
    <thead>
    <tr>
        <th>Last Name</th>
        <th>First Name</th>
        <th>Email</th>
        <th>Due</th>
        <th>Web Site</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>Smith</td>
        <td>John</td>
        <td>jsmith@gmail.com</td>
        <td>$50.00</td>
        <td>http://www.jsmith.com</td>
    </tr>
    <tr>
        <td>Bach</td>
        <td>Frank</td>
        <td>fbach@yahoo.com</td>
        <td>$50.00</td>
        <td>http://www.frank.com</td>
    </tr>
    <tr>
        <td>Doe</td>
        <td>Jason</td>
        <td>jdoe@hotmail.com</td>
        <td>$100.00</td>
        <td>http://www.jdoe.com</td>
    </tr>
    <tr>
        <td>Conway</td>
        <td>Tim</td>
        <td>tconway@earthlink.net</td>
        <td>$50.00</td>
        <td>http://www.timconway.com</td>
    </tr>
    </tbody>
    </table>
    </div>
    <input type="button" onclick="append()" value="append"/>
</body>

如果追加，这将有效。在删除的情况下尝试相同但我不确定

Answer 2

根据this GitHub feature：

现在，您可以在添加新的数据列之后使用updateAll方法来更新表缓存。这是demo：

public static String add(String a, String b) {
    int carry = 0;
    String result = "";

    for (int i = a.length() - 1; i >= 0; i--) {
      int digitA = a.charAt(i) - 48;
      int digitB = b.charAt(i) - 48;

      int resultingNumber = digitA + digitB + carry;
      if (resultingNumber >= 10) {
        result = (resultingNumber % 10) + result;
        carry = 1;
      } else {
        result = resultingNumber + result;
        carry = 0;
      }
    }
    if (carry > 0) {
      result = carry + result;
    }
    return result;
}

Answer 3

另一种选择是调用destroy方法以从表中完全删除tablesorter功能，包括所有小部件，关联的数据和事件处理程序。

$('#myTable').trigger('destroy');

然后为表中的新列添加相应的标记，只需调用

$("#myTable").tablesorter()

像往常一样。

将列动态添加到使用jQuery的tablesorter管理的表中

3 个答案: