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错误$ 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>";

加上一些db的东西。这一切都运作良好并且符合预期。

我现在的问题是，何时以及如何致电$('#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>";
?>

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

1 个答案: