jQuery的tablesorter的 - 功能AJAX调用后损失 [英] jQuery tablesorter - loss of functionality after AJAX call

问题描述

我最近一直在试验的tablesorter插件的jQuery。我已经成功地得到它，而一旦实例中运行的，和我很IM pressed。不过，我试图在tablesorter的应用到不同的表，却遇到了一些困难......

I have recently been experimenting with the tablesorter plugin for jQuery. I have successfully got it up and running in once instance, and am very impressed. However, I have tried to apply the tablesorter to a different table, only to encounter some difficulties...

基本上表导致问题有一个＆LT; UL＆GT; 上面它作为一组选项卡为表。所以如果你点击这些标签之一，一个AJAX调用是和表重新填充相关的特定选项卡单击行。当页面最初加载（即标签已被点击前）的tablesorter功能完全按预期工作。

Basically the table causing a problem has a <ul> above it which acts as a set of tabs for the table. so if you click one of these tabs, an AJAX call is made and the table is repopulated with the rows relevant to the specific tab clicked. When the page initially loads (i.e. before a tab has been clicked) the tablesorter functionality works exactly as expected.

但是，单击一个选项卡和重新填充的表时，该功能消失，使其没有排序功能。即使你回到原来的选项卡，单击另一个后，功能不会返回 - 这样做的唯一方法是在页面的浏览器中的物理刷新

But when a tab is clicked and the table repopulated, the functionality disappears, rendering it without the sortable feature. Even if you go back to the original tab, after clicking another, the functionality does not return - the only way to do so is a physical refresh of the page in the browser.

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

I have seen a solution which seems similar to my problem on this site, and someone recommends using the jQuery plugin, livequery. I have tried this but to no avail :-(

如果有人有任何建议我会最AP preciative。我可以张贴code片段，如果它有助于（虽然我知道实例化$ C $下的tablesorter是好的，因为它适用于任何选项卡表 - 所以这绝对不是）

If someone has any suggestions I would be most appreciative. I can post code snippets if it would help (though I know the instantiation code for tablesorter is fine as it works on tables with no tabs - so it's definitely not that!)

编辑： 按照要求，这里有一些code片段：
被排序的表是＆LT;表ID =＃sortableTable＃＆GT; ..＆LT; /表＆gt; ，实例化$ C $下的tablesorter我现在用的就是

As requested, here are some code snippets:
The table being sorted is <table id="#sortableTable#">..</table>, the instantiation code for tablesorter I am using is:

$(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如下：

And I tried to rig up livequery as follows:

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

这还没有虽然帮助了......我不知道我是否应该使用表的liveQuery的ID，因为它是在点击＆LT; UL＆GT; 我应该响应，这是当然的表本身的一部分。我已经尝试了许多变化，希望他们中的一个将帮助，但无济于事： - （

This has not helped though... I am not sure whether I should use the id of the table with livequery as it is the click on the <ul> I should be responding to, which is of course not part of the table itself. I have tried a number of variations in the hope that one of them will help, but to no avail :-(

推荐答案

一旦追加数据，做到这一点：

Once you have appended your data, do this:

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

这将让插件知道它已更新，并重新排序。

This will let the plugin know it has had an update, and re-sort it.

在文档中给出​​的完整的例子：

The complete example given in the doc:

$(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的文档： <一href="http://tablesorter.com/docs/example-ajax.html">http://tablesorter.com/docs/example-ajax.html

From the tablesorter doc here: http://tablesorter.com/docs/example-ajax.html

这篇关于jQuery的tablesorter的 - 功能AJAX调用后损失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！