如何向我的 HTML 表格添加分页？我的表是通过使用 php 的 while 循环动态填充的

Posted 2023-02-25

【中文标题】如何向我的 HTML 表格添加分页？我的表是通过使用 php 的 while 循环动态填充的

【英文标题】：How can I add pagination to my HTML table? My table is populated dynamically through a while loop using php

【发布时间】：2019-07-22 07:40:55

【问题描述】：

我的表是用下面的代码创建的？我尝试过使用数据表、表排序器和寻呼机，但我无法让其中任何一个工作。关于如何向此表添加寻呼机以限制一次显示的行数并能够在下一个和上一个之间移动的任何想法？

<table id="table_id" class="tablesorter">
    <thead>
        <tr>
            <th>Event Name</th>
            <th>Event Details</th>
            <th>Cancel</th>
        </tr>
    </thead>
    <tbody>
        <?php
        $query = "SELECT * FROM Events , user_events WHERE user_events.id = '" . mysqli_real_escape_string($connection, $_SESSION['id']) . "' AND user_events.Event_ID = Events.Event_ID";
        $display_event = mysqli_query($connection, $query);

        while ($row = mysqli_fetch_assoc($display_event)) 
            $event_id = $row['Event_ID'];
            $event_title = $row['Event_Name'];
            $event_image = $row['event_image'];
            $event_date = $row['Start_Date'];
            $event_location = $row['location'];
            $event_content = $row['Other_Details'];
            $event_status = $row['Event_Status_Code'];

            $today = date("Y-m-d");
            echo "<tr>";

            if ($event_status == 'published' and $event_date >= $today) 
                ?>



                <?php echo "<td>$event_title</td>"; ?>
                <?php echo "<td>$event_date</td>"; ?>

            <?php echo "<td><form method=\"post\">
                            <button name=\"delete\" onclick=\"return confirm('Are you sure you want to Deregister')\" value=\"$event_id\">Deregister</button>
                        </form></td>";
        
    
    ?>
    </tbody>
</table>

【问题讨论】：

你必须构建相同的逻辑，到目前为止你尝试了什么？

提及您的寻呼机代码

您可以在客户端或服务器端使用寻呼机。在客户端，您可以使用数据表，例如 jquery 的：datatables.net。在服务器端，你需要创建自己的寻呼机，它基本上是你的 sql 查询的一些限制和偏移参数。

【参考方案1】：

您可以使用 Datatable 并添加此脚本，您可以在 datables.net 中查看：

$(document).ready(function () 
var table = $('#example').DataTable(
    scrollY: "300px",
    scrollX: true,
    scrollCollapse: true,
    paging: True,//to allow pagination of your table

    /*Pour fixer les colonnes*/
    fixedColumns: 
        leftColumns: 1,
        rightColumns: 0
    ,
    /*activer/désactiver la recherche et le tri */
    searching: false,
    ordering: false
);

);