jQuery tablesorter - AJAX 调用后功能丢失答案

【问题标题】：jQuery tablesorter - loss of functionality after AJAX calljQuery tablesorter - AJAX 调用后功能丢失
【发布时间】：2009-02-18 11:23:48
【问题描述】：

我最近一直在试验 jQuery 的 tablesorter 插件。我已经成功地启动并运行了一次，印象非常深刻。但是，我尝试将 tablesorter 应用到不同的 table，只是遇到了一些困难......

基本上，导致问题的表格在其上方有一个<ul>，它充当表格的一组选项卡。因此，如果您单击其中一个选项卡，则会进行 AJAX 调用，并使用与单击的特定选项卡相关的行重新填充表格。当页面最初加载时（即在单击选项卡之前），tablesorter 功能完全按预期工作。

但是，当单击选项卡并重新填充表格时，该功能会消失，使其没有可排序功能。即使您返回原始选项卡，在单击另一个选项卡后，功能也不会返回 - 唯一的方法是在浏览器中物理刷新页面。

我在这个网站上看到了一个与我的问题类似的解决方案，有人建议使用 jQuery 插件 livequery。我试过了，但没有用:-(

如果有人有任何建议，我将不胜感激。如果有帮助，我可以发布代码 sn-ps（尽管我知道 tablesorter 的实例化代码很好，因为它适用于没有标签的表 - 所以绝对不是那样！）

编辑： 根据要求，这里有一些代码 sn-ps：
被排序的表是<table id="#sortableTable#">..</table>，我正在使用的tablesorter的实例化代码是：

$(document).ready(function() 
{ 
    $("#sortableTable").tablesorter(
    {
        headers: //disable any headers not worthy of sorting!
        {
            0: { sorter: false },
            5: { sorter: false }
        },
        sortMultiSortKey: 'ctrlKey',
        debug:true,
        widgets: ['zebra']
    }); 
});

我尝试按如下方式安装 livequery：

$("#sortableTable").livequery(function(){
   $(this).tablesorter();
});

但这并没有帮助...我不确定是否应该将表的 id 与 livequery 一起使用，因为它是我应该响应的 <ul> 上的点击，这当然不是表本身。我尝试了多种变体，希望其中一种能有所帮助，但无济于事:-(

【问题讨论】：

标签： jquery ajax tablesorter

【解决方案1】：

添加数据后，请执行以下操作：

$("your-table").trigger("update"); 
var sorting = [[0,0]]; 
$("your-table").trigger("sorton",[sorting]);

这会让插件知道它有更新，并重新排序。

文档中给出的完整示例：

$(document).ready(function() { 
    $("table").tablesorter(); 
    $("#ajax-append").click(function() { 
         $.get("assets/ajax-content.html", function(html) { 
             // append the "ajax'd" data to the table body 
             $("table tbody").append(html); 
            // let the plugin know that we made a update 
            $("table").trigger("update"); 
            // set sorting column and direction, this will sort on the first and third column 
            var sorting = [[2,1],[0,0]]; 
            // sort on the first column 
            $("table").trigger("sorton",[sorting]); 
        }); 
        return false; 
    }); 
});

来自 tablesorter 文档： http://tablesorter.com/docs/example-ajax.html

【讨论】：

刚刚遇到这个。 .trigger() 比再次调用 .tablesorter() 好得多。谢谢！

【解决方案2】：

你试过打电话吗

$("#myTable").tablesorter();

在您处理单击选项卡并重新填充表格的代码之后？？？如果没有，请尝试一下。

【讨论】：

尝试 elwyn 建议的 trigger() 方法，比重新初始化整个表更有效。
谢谢..Grt 回答..为我工作。

【解决方案3】：

可能是因为您的第二个表是使用 ajax 创建的，因此您需要重新绑定事件。您可能需要使用 LiveQuery 插件

http://docs.jquery.com/Plugins/livequery

这可能会“自动”帮助您解决问题。

编辑：抱歉，刚刚重读您的帖子，发现您已经尝试过了。

更新。 我已经安装了一个快速测试工具，希望能有所帮助。顶部有 3 个 LI，每个 LI 都有不同的更新表格内容的方式。最后一个更新内容并保持排序

    <script src="jquery-1.3.js"  type="text/javascript" ></script>
    <script src="jquery.livequery.js"  type="text/javascript" ></script>
    <script src="jquery.tablesorter.min.js" type="text/javascript" ></script>

<script>

var newTableContents = "<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></tbody>";


 $(document).ready(function() 
    { 
        $("#addData").click(function(event){
        $("#sortableTable").html(newTableContents);
    });

    $("#addLivequery").livequery("click", function(event){
        $("#sortableTable").html(newTableContents);
    });

    $("#addLiveTable").livequery("click", function(event){
        $("#sortableTable").html(newTableContents);
        $("#sortableTable").tablesorter( { } ); 
    });

    $("#sortableTable").tablesorter( { } ); 
  });
</script>

        <ul>
            <li id="addData" style="background-color:#ffcc99;display:inline;">Update Table</li>
            <li id="addLivequery" style="background-color:#99ccff;display:inline;">Update Table with livequery</li>
            <li id="addLiveTable" style="background-color:#99cc99;display:inline;">Update Table with livequery & tablesorter</li> 
        </ul>

        <hr />
        <table id="sortableTable"> 
        <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>Jones</td> 
            <td>Joe</td> 
            <td>jjones@gmail.com</td> 
            <td>$100.00</td> 
            <td>http://www.jjones.com</td> 
        </tr> 
        <tr> 
            <td>French</td> 
            <td>Guy</td> 
            <td>gf@yahoo.com</td> 
            <td>$50.00</td> 
            <td>http://www.french.com</td> 
        </tr> 
        </tbody> 
        </table>

【讨论】：

是的，我确实尝试过，但我没有使用 jQuery 的经验，当然也没有 livequery……也许我做错了？
我自己对 JQuery 和 livequery 没有那么丰富的经验，但我遇到了一个昨天解决的问题。如果你发布一些代码 sn-p 我会看看我是否能看到任何有帮助的东西。
在我的原帖中添加了sn-ps
添加了一个可能对您有所帮助的测试工具。
谢谢，我现在会好好研究一下。让你知道我的进展情况

【解决方案4】：

使用ajaxStop函数，ajax调用完成后代码会运行。

$("#DivBeingUpdated").ajaxStop(function(){ 
    $("table").tablesorter()
});

【讨论】：

【解决方案5】：

原来我必须对 AJAX 相关代码进行一些修改，以便在提取任何数据后重新调用 $("#myTable").tablesorter(..)...

【讨论】：

【解决方案6】：

我遇到了同样的问题，只是我加载了一个表，其中每个“类别”都有一行，然后使用异步调用将每个类别的数据插入到表中。在返回每条记录后调用 $("#myTable").tablesorter(..) 会导致我的浏览器在加载超过微不足道的记录数时崩溃。

我的解决方案是声明两个变量，totalRecords 和 fetchedRecords。在$(document).ready() 中，我将totalRecords 设置为$("#recordRows").length;，每次在表中填充记录时，fetchedRecords 变量都会递增，如果fetchedRecords >= totalRecords 则我调用$("#myTable").tableSorter(..).

对我来说效果很好。当然，您的里程可能会有所不同。

【讨论】：

【解决方案7】：

在更改您的 html 内容时调用 ajax 后，您需要更新 TableSorter。

帮我试试这个，没问题

如果你附加 html

$("table tbody").append(html); 
        // let the plugin know that we made a update 
        $("table").trigger("update"); 
        // set sorting column and direction, this will sort on the first and third column 
        var sorting = [[2,1],[0,0]]; 
        // sort on the first column 
        $("table").trigger("sorton",[sorting]);

当你添加新的 html 而不是旧的

$("table").trigger("update");
$("table").trigger("sorton");

【讨论】：

【解决方案8】：

我最近遇到了这个问题。 elwyn 的解决方案对我不起作用。但this topic 建议问题在于“更新”和“排序”事件的功能同步。

如果您查看 jQuery Tablesorter 2.0 (ver. 2.0.5b) 源代码的代码，您会看到如下内容：

$this.bind("update", function () {
    var me = this;
    setTimeout(function () {
        // rebuild parsers.
        me.config.parsers = buildParserCache(me, $headers);
        // rebuild the cache map
        cache = buildCache(me);
    }, 1);
}).bind("sorton", function (e, list) {
    $(this).trigger("sortStart");
    config.sortList = list;
    // update and store the sortlist
    var sortList = config.sortList;
    // update header count index
    updateHeaderSortCount(this, sortList);
    // set css for headers
    setHeadersCss(this, $headers, sortList, sortCSS);
    // sort the table and append it to the dom
    appendToTable(this, multisort(this, sortList, cache));
});

所以问题在于setTimeout 使得更新在排序之前完成的可能性降低。我的解决方案是实现另一个事件“updateSort”，这样上面的代码就变成了：

var updateFunc = function (me) {
    me.config.parsers = buildParserCache(me, $headers);
    cache = buildCache(me);
};
var sortFunc = function (me, e, list) {
    $(me).trigger("sortStart");
    config.sortList = list;
    var sortList = config.sortList;
    updateHeaderSortCount(me, sortList);
    setHeadersCss(me, $headers, sortList, sortCSS);
    appendToTable(me, multisort(me, sortList, cache));
};
$this.bind("update", function () {
    var me = this;
    setTimeout(updateFunc(me), 1);
}).bind("sorton", function(e, list) {
    var me = this;
    sortFunc(me, e, list);
}).bind("updateSort", function (e, list) {
    var me = this;
    updateFunc(me);
    sortFunc(me, e, list);
});

更新表中的数据后，您只需触发这个新事件：

var sorting = [[0,0]]; 
$("#your-table").trigger("updateSort",[sorting]);

【讨论】：