在由 ajax 填充的动态创建的选项卡中使用 Tablesorter

Question

我遇到了一个乍一看似乎被广泛讨论的问题，但我发现的所有提示都没有帮助。所以我现在尝试一个自己的线程。

我正在使用 jQuery 创建一个数据库前端，用于搜索年度报告并将它们显示在一个表格中，一个表格一年。每个表都放置在一个 jQuery 选项卡中。这些选项卡是动态创建的。所以我可以有 2001、2003 等的标签。每个选项卡的内容是通过选项卡的 ajax 功能动态加载的。

这是创建标签的脚本。在 html 正文中创建了一个启动选项卡，将在以下内容中删除：

<script>
     $(document).ready(function() {
           $( "#tabs" ).tabs({ cache:true });

        saYears = $.grep(saYears, function(v, k){
                  return $.inArray(v ,saYears) === k;
                 });

       for(var i=0; i < saYears.length; 
       {
         $("div#tabs ul").append(
              "<li><a href='dbfunctions/GetEntriesForYear.php?year="+saYears[i]"'>" + 
                   saYears[i] + "</a></li>"
              );

        if(i === 0)
         {
           // Deletes the "starter tab"
           $('#tabs ul:first li:eq(0) a').remove();
         }

         $("div#tabs").tabs("refresh");
       }
       $( "#tabs" ).tabs( "option", "active", saYears.length-1 );
   });

    </script>

这里是关于如何从选项卡所指向的 GetEntriesForYear.php 文件创建表的草稿。前导 div error$year 用于测试目的：

echo "<div id='error$year'></div>";
echo "<div id='hitlist-$year' class='ui-widget'>";
echo "<table id='table$year' class='tablesorter' class='ui-widget'>";
echo "<thead>";
echo "<tr align='left'>";
echo "<th>Document date</th>";
echo "<th>Author</th>";
echo "<th>Keywords</th>";
echo "<tbody overflow:scroll>";
  GetEntriesNow($year);
echo "</tbody></table></div>";

填充表格的函数正在执行预期的操作：

print "<td>" . $entry['date'] . "</td>";
print "<td>" . $entry['document_reporter'] . "</td>";
print "<td>" . $entry['keyword_' + $i] . "</td>";

加上一些数据库的东西。这一切都运行良好，符合预期。

我现在的问题是，何时以及如何致电$('#table2013').tablesorter()。我尝试了一些关于 ajaxStop、在选项卡上创建/加载/激活等事件的提示，但不会进行排序。有没有人提示在哪里使用什么以及放置在哪里？

Answer 1

GetEntriesForYear.php：

<?php
$year = $_GET['year'];
?>
<script type="text/javascript" src="../tablesorter/jquery-latest.js"></script> 
<script type="text/javascript" src="../tablesorter/jquery.tablesorter.js"></script> 
<link rel="stylesheet" href="../tablesorter/themes/blue/style.css" type="text/css" id="" media="print, projection, screen" />
<link rel="stylesheet" href="../jQuery/ui/css/start/jquery-ui-1.10.3.custom.css">
<script src="../jQuery/ui/js/jquery-1.9.1.js"></script>
<script src="../jQuery/ui/js/jquery-ui-1.10.3.custom.js"></script>
<script>
$(function() {
    $('#table<?=$year;?>').tablesorter();
    $('#error<?=$year;?>').html('accessed tab for year $year');
});
</script>
<?
function GetEntriesNow($year)
{
    session_start();
    $startDate = $year ."-01-01";
    $endDate =  $year ."-12-31";
    $results = PgsqlDB::GetEntries($startDate, $endDate);
    foreach ($results as $entry) {
        print "<td>" . $entry['date'] . "</td>";
        print "<td>" . $entry['document_reporter'] . "</td>";
        print "<td>" . $entry['keyword_' + $i] . "</td>";
    }
}
echo "<div id='error$year'></div>";
echo "<div id='hitlist-$year' class='ui-widget'>";
echo "<table id='table$year' class='tablesorter' class='ui-widget'>";
echo "<thead>";
echo "<tr align='left'>";
echo "<th>Document date</th>";
echo "<th>Author</th>";
echo "<th>Keyword</th>";
echo "<tbody overflow:scroll>";
GetEntriesNow($year);
echo "</tbody></table></div>";
?>