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

My table is created with the below code? I have tried using data tables, table sorter and pager and I am unable to get any of these working. Any ideas for how I can add a pager to this table to limit the amount of rows that are showing at one time and be able to go between next and previous?

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

You can use Datatable an you add this script you can take look in 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
});

});