Question

我一直在努力使我的Tabes可排序，并偶然发现了tablesorter。

因此我将其安装并遵循Documentation

可悲的是，我第一步失败了，不知道为什么。

在head标签中放置我的脚本：

<head>

    <meta charset="utf-8">  
    <script src="components/com_memberportal/events/jquery.tablesorter.min.js"></script>
    <script src="components/com_memberportal/events/jquery.tablesorter.pager.js"></script>
    <script>
        jQuery(function($) { 
            $("table") 
                .tablesorter({widthFixed: true, widgets: ['zebra']}) 
                .tablesorterPager({container: $("#pager")}); 

            $("#EventTable").tablesorter(); 
        }); 
    </script>
</head>

路径是正确的，我检查了一下。所以这是我的桌子：

         <table id="EventTable" class="tablesorter">
            <thead>
                <tr>
                    <th>Date</th>
                    <th>Type</th>
                    <th>Speaker</th>
                    <th>Subject</th>
                </tr>
            </thead>
            <tbody> 
                <?php 
                    while($row = mysqli_fetch_array($searchresult)):

                    $date = explode("-", $row['event_date']);
                    $time_gone = explode(" ", $date[2]);
                    $date_table = $time_gone[0] . "." . $date[1] . "." . $date[0];  
                ?>   
                <tr>
                    <td><?php echo $date_table;?></td>               
                    <td><?php echo $row['event_type_name'];?></td>

                    <?php 
                        $UserLink = "https://www.myhost.com/website/index.php?option=com_memberportal&view=profile&" . $row['firstname'] . "-" . $row['lastname'];
                        echo '<td><a href="' . $UserLink . '">', $row['firstname'], " " ,$row['lastname'] . '</a></td>';

                        $EventLink = "https://www.myhost.com/website/index.php?option=com_memberportal&view=event&" . $row['event_date'] . "&" . $row['event_subject'];
                        echo '<td><a href="' . $EventLink . '">', $row['event_subject'] . '</a></td>';

                    ?>
                </tr>
                <?php endwhile;?>
            </tbody>
        </table>

基本上，我有一个表格，其中列出了包含4列（日期，类型，发言人，主题）的事件。

表中的所有信息均来自我的mysql数据库。我知道它是文档中的一个硬编码表，但是我认为只要我在正确的部分上包裹正确的标签，它就仍然可以与我的表一起使用。

有人知道我在做什么错吗？

编辑：我的html表的图片

Answer 1

问题是添加的行全部包裹在自己的<tbody>中-您无法对单个行进行排序。使循环仅添加<tr>。像这样：

<tbody>
<?php 
    while($row = mysqli_fetch_array($searchresult)):

    $date = explode("-", $row['event_date']);
    $time_gone = explode(" ", $date[2]);
    $date_table = $time_gone[0] . "." . $date[1] . "." . $date[0];  
?>
<tr>
    <td><?php echo $date_table;?></td>
    <td><?php echo $row['event_type_name'];?></td>

    <?php 
        $UserLink = "https://www.myhost.com/website/index.php?option=com_memberportal&view=profile&" . $row['firstname'] . "-" . $row['lastname'];
        echo '<td><a href="' . $UserLink . '">', $row['firstname'], " " ,$row['lastname'] . '</a></td>';

        $EventLink = "https://www.myhost.com/website/index.php?option=com_memberportal&view=event&" . $row['event_date'] . "&" . $row['event_subject'];
        echo '<td><a href="' . $EventLink . '">', $row['event_subject'] . '</a></td>';

    ?>
</tr>
<?php endwhile;?>
</tbody>

第二，不再继续维护原始表排序器。如果您仍然想使用tablesorter，请尝试使用我的fork of tablesorter，您可以直接使用它进行替换，而无需更改javascript。

我建议合并初始化代码并使用$(function(){...});，因为jQuery的较新版本不支持文档就绪格式。

<script>
$(function() { 
    $("table") 
        .tablesorter({widthFixed: true, widgets: ['zebra']}) 
        .tablesorterPager({container: $("#pager")}); 

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

jQuery Tablesorter插件-可排序标头不起作用

1 个答案: