当我在其上添加数据库时，数据表无法工作 [php-codeigniter] [关闭]

Question

关闭。 这个问题需要更加集中。 它目前不接受答案。

---

想改进这个问题？ 更新问题，使其仅通过编辑此帖子专注于一个问题。

3天前关闭。

改进这个问题

当我从数据表中放入原始数据表时，它工作得非常好，但是当我删除它并从数据库中放置我的数据时，它看起来像这样。

我在<tbody>中执行 PHP 后会发生什么：

在我删除许多默认表并放置我的代码之前，它看起来像这样，我希望它也像这样。

<table id="example" class="display" style="width:100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tbody>
        <?php foreach($result as $row) { ?>
            <tr>
            <th scope="row"><?php echo $row-> id; ?></th>
            <td><?php echo $row-> lastname; ?></td>
            <td><?php echo $row-> firstname; ?></td>
            <td><?php echo $row-> gender; ?></td>
            <td><?php echo $row-> birthdate; ?></td>
            <td><?php echo $row-> brgy; ?></td>
            <td><?php echo $row-> contactno; ?></td>
            </tr>
            <?php }?>
        </tbody>
        <tfoot>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </tfoot>
    </table>

添加到标题中：

<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.12.1/js/dataTables.bootstrap5.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.12.1/css/dataTables.bootstrap5.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.3/css/bootstrap.min.css">
<script>
$(document).ready(function () {
    $('#example').DataTable({
        scrollY: 270,
        scrollX: true,
    });
});
</script>