DataTables排序功能失效排查：可能的问题有哪些？

核心问题分析 #

1. 表格结构错误：你的<tr>标签写在PHP循环外部，所有数据库查询返回的<td>都被塞进了同一个表格行。DataTables只能识别到一行数据，因此点击排序时只有这唯一一行会有变化，其余数据无法被正确排序。
2. 模态框ID重复：循环中重复生成id="deleteConfirmationModal"的删除确认模态框，而DOM中ID必须唯一，导致所有删除按钮触发的都是同一个模态框，最终出现所有数据共用同一ID的连锁问题。

修正后的代码 #

HTML部分 #

<table id="datatablesSimple">
    <thead>
        <tr>
            <th>Username</th>
            <th>Nama</th>
            <th>Identitas</th>
            <th>Kelola</th>
        </tr>
    </thead>
    <tbody>
        <?php
        $no = 1;
        $data = mysqli_query($koneksi, "select * from user Order by identitas ASC");
        while ($d = mysqli_fetch_array($data)) {
        ?>
        <tr>
            <td><?php echo $d['username']; ?></td>
            <td><?php echo $d['nama']; ?></td>
            <td><?php echo ucwords($d['identitas']); ?></td>
            <td>
                <center>
                    <div class="data-item">
                        <button class="btn btn-primary edit-btn fas fa-pen-to-square" data-toggle="modal" data-target="#editModal" data-username="<?php echo $d['username']; ?>">Edit</button>
                        <button class="btn btn-danger delete-btn fas fa-trash" data-toggle="modal" data-target="#deleteConfirmationModal" data-username="<?php echo $d['username']; ?>">Hapus</button>
                    </div>
                </center>
            </td>
        </tr>
        <?php
        }
        ?>
    </tbody>
</table>

<!-- 模态框移至循环外部，确保ID唯一 -->
<div class="modal fade" id="deleteConfirmationModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Confirm Deletion</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                Apa anda yakin ingin menghapus data ini ?
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                <a id="deleteLink" href="#" class="btn btn-danger">Delete</a>
            </div>
        </div>
    </div>
</div>

JavaScript部分（添加到页面底部） #

// 监听删除按钮点击，动态设置删除链接
$('.delete-btn').click(function() {
    var username = $(this).data('username');
    // 替换为你的实际删除接口地址，例如 "delete_user.php?username=" + username
    $('#deleteLink').attr('href', 'your_delete_api.php?username=' + username);
});

修正说明 #

• 将<tr>放入PHP循环内部后，每条数据都会生成独立的表格行，DataTables就能正确识别所有行并执行排序操作。
• 删除模态框移到循环外后，整个页面只有一个唯一ID的模态框，通过JS动态获取点击按钮的data-username属性来设置删除链接，彻底解决了ID冲突导致的共用ID问题。

内容的提问来源于stack exchange，提问作者Khairi Nafarin