Плагин jQuery Tablesorter - сортируемые заголовки не работают - PullRequest
Новая
       17

Плагин jQuery Tablesorter - сортируемые заголовки не работают

0 голосов
/ 12 сентября 2018

Я работал над тем, чтобы мои Табы можно было сортировать и наткнулся на сортировщик.

Поэтому я устанавливаю его и следую документации

К сожалению, я терплю неудачу на первом этапе и не знаю почему.

Вот мои сценарии в заголовке тега: 

<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-таблицы

enter image description here

1 Ответ

0 голосов
/ 12 сентября 2018

Проблема в том, что все добавленные строки обернуты в свои <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, попробуйте мой форк TableSort , который вы можете вставить, чтобы заменить без каких-либо изменений в JavaScript.

Я бы предложил объединить код инициализации и использовать $(function(){...}); поскольку более новые версии jQuery не поддерживают формат готового документа. 

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

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