Question

我最近一直在尝试使用jQuery的tablesorter插件。我已成功完成并运行一次，并给我留下了深刻的印象。但是，我试图将tablesorter应用到另一个表中，只是遇到了一些困难......

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

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

我已经看到了一个类似于我在这个网站上的问题的解决方案，有人建议使用jQuery插件，livequery。我试过这个但无济于事： - （

如果有人有任何建议我会非常感激。如果它有用，我可以发布代码片段（虽然我知道tablesorter的实例化代码很好，因为它适用于没有制表符的表 - 所以它肯定不是那样！）

修改根据要求，这里有一些代码片段：
正在排序的表是<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();
});

这虽然没有帮助......我不确定是否应该使用带有livequery的表的id，因为点击<ul>我应该回应，这当然不是表本身。我尝试了许多变化，希望其中一个会有所帮助，但无济于事： - （

Answer 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 doc： http://tablesorter.com/docs/example-ajax.html

Answer 2

您是否尝试过调用

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

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

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

Answer 4

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

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

Answer 5

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

Answer 6

我遇到了同样的问题，除了我正在加载一个每个'类别'都有一行的表，然后使用异步调用将每个类别的数据插入到表中。在每条记录被返回后调用$("#myTable").tablesorter(..)导致我的浏览器在加载了超过一小部分记录时炸弹。

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

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

Answer 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");

Answer 8

我最近遇到过这个问题。 elwyn的解决方案对我没用。但是this topic表明问题在于＆＃34;更新＆＃34;和＆＃34; sorton＆＃34;事件

如果查看jQuery Tablesorter 2.0（版本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使得在排序之前完成更新的可能性降低。我的解决方案是实现另一个事件＆＃34; updateSort＆＃34;，以便上面的代码变为：

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]);

jQuery tablesorter - AJAX调用后功能丧失

8 个答案: