如何让DataTable插件内的更新按钮生效（PHP&CodeIgniter）

Hey there! Let's get to the bottom of this frustrating issue you've been stuck on for 3 days. I can totally relate to accidentally deleting working code and struggling to get things back on track as a PHP newbie—let's fix this step by step.

The Root Cause #

Your core problem is invalid HTML structure: you're wrapping <tr> elements directly with <form> tags, but HTML rules state that <tbody> can only contain <tr> elements. When DataTables tries to render your table, it gets confused by this illegal nesting. The browser will automatically try to "fix" the DOM by moving the <form> tags outside the table, which breaks the connection between your submit buttons and their forms—hence why the buttons don't work when DataTables is displaying correctly. When you delete a header, the table structure becomes mismatched, DataTables can't render properly, and the browser's DOM correction doesn't break the form-button link (by pure coincidence), but that's not a real solution.

The Fixed Code #

Here's the corrected version of your table code with valid HTML structure. We'll move each form inside the <td> containing the submit button, and fix a few typos I noticed along the way:

<div class="dataTable_wrapper">
<table class="table table-striped table-bordered table-hover" id="dataTables-example">
<thead>
<tr>
<th>No.</th>
<th>Nama Depan</th>
<th>Nama Belakang</th>
<th>Email</th>
<th>Nomor HP</th>
<th>Alamat</th>
<th>Pesan</th>
<th>Status</th>
<th>Accept</th>
<th>Reject</th> <!-- Added to match your extra reject button column -->
</tr>
</thead>
<tbody>
<?php $test123 = array("gradeA","gradeC","gradeU","gradeX");?>
<?php foreach($anggota as $p1){ ?>
<tr class="<?= $test123[array_rand($test123)] ?>">
<td><?= $p1->id_dftr ?></td>
<td><?= $p1->nm_dpn ?></td>
<td><?= $p1->nm_blkng ?></td> <!-- Fixed display value (was id_dftr before) -->
<td><?= $p1->email ?></td>
<td><?= $p1->nomorhp ?></td>
<td><?= $p1->alamat ?></td>
<td><?= $p1->pesan ?></td>
<td><?= $p1->status ?></td>
<td>
    <!-- Move form inside this table cell -->
    <form action="<?= base_url('administrasi/submit');?>" method="post">
        <!-- Only include fields your backend needs for the update (trimmed to essentials below) -->
        <input type='hidden' name='id_dftr' value='<?= $p1->id_dftr ?>'>
        <input type='hidden' name='status' value='1'>
        <!-- Optional: Keep other fields only if your backend requires them -->
        <input type='hidden' name='nm_dpn' value='<?= $p1->nm_dpn ?>'>
        <input type='hidden' name='nm_blkng' value='<?= $p1->nm_blkng ?>'> <!-- Fixed hidden value typo -->
        <input type='hidden' name='email' value='<?= $p1->email ?>'>
        <input type='hidden' name='nomorhp' value='<?= $p1->nomorhp ?>'>
        <input type='hidden' name='alamat' value='<?= $p1->alamat ?>'>
        <input type='hidden' name='pesan' value='<?= $p1->pesan ?>'>
        
        <button type='submit' class='btn btn-success' name='sbm' value='upd_user'>
            <i class='fa fa-check'></i>Terima
        </button>
    </form>
</td>
<td>
    <a href='<?= base_url('administrasi/hps_dftr/'.$p1->id_dftr) ?>'>
        <button type='button' class='btn btn-danger'>
            <i class='fa fa-close'></i>Tolak
        </button>
    </a>
</td>
</tr>
<?php }?>
</tbody>
</table>
</div>

Key Fixes & Notes #

1. Valid DOM Structure: Forms are now nested inside <td> elements, which is allowed within table rows. This keeps DataTables happy and preserves the form-button connection.
2. Typo Corrections: Fixed the nm_blkng field's display value and hidden input (you had accidentally used $p1->id_dftr instead of $p1->nm_blkng).
3. Header Alignment: Added a "Reject" header to match your extra column with the Tolak button, preventing DataTables from throwing structure warnings.
4. Optional Optimization: Since you're only updating the status column, you could simplify the form to just id_dftr and status—no need to send all other user data unless your backend explicitly requires it.

Why This Works #

Now DataTables can parse the table structure correctly without DOM interference, and each submit button is properly linked to its form. You'll get a working update button while keeping DataTables' formatting intact.

内容的提问来源于stack exchange，提问作者Hermes Djohar