如何在我的HTML表中添加分页?我的表是通过使用PHP的while循环动态填充的

时间:2019-02-28 11:39:19

标签: php html sql phpmyadmin

我的表是用以下代码创建的吗?我尝试使用数据表,表排序器和分页器,但我无法使其中任何一个正常工作。关于如何向该表添加分页器以限制一次显示的行数以及可以在下一个和上一个之间移动的任何想法?

<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>

1 个答案:

答案 0 :(得分: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
});

});