数据表（编辑按钮）在第二页上不起作用

Question

我目前有一个表，用于填充来自我的服务器的数据。但是，在第二页及以后的页面上，“编辑”按钮不再起作用。仅当我将表链接到数据表函数时才会出现此问题。下面是该表的 HTML。

<div class="card-body">
                            <div class="table-responsive ">
                                <table id="uni_table" class="display nowrap table table-hover table-striped table-bordered" cellspacing="0" width="100%">
                                    <thead>
                                        <tr>
                                          <!--  <th onclick="sortTable(0)" class="fa fa-fw fa-sort">Employee Name</th> -->
                                            <th>Employee Name</th>
                                            <th>EID</th>
                                            <th>Slips Issued</th>
                                            <th>Gender</th>
                                            <th>Description</th>

                                            <th>Date</th>
                                            <th>Edit</th>

                                            <th>Shirt</th>
                                            <th>Shirt Colour</th>
                                            <th>Pants</th>
                                            <th>Pants Color</th>

                                            <th>Tie</th>
                                            <th>Cap</th>
                                            <th>Insignia Stripe</th>
                                            <th>Crest</th>
                                            <th>Star Nickle</th>

                                            <th>S.O Pin</th>
                                            <th>Epaulettes</th>
                                            <th>Shoes</th>
                                            <th>Jacket</th>




                                        </tr>
                                    </thead>
                                
                                    <tbody>
                                       <?php foreach($uniforms as $value): ?>
                                        <tr>

                                          <!-- Values in Database -->

                                            <td ><?php echo $value->first_name.' '.$value->last_name; ?></td>
                                            <td ><?php echo $value->em_code; ?></td>
                                            <td ><?php echo $value->nos; ?></td>
                                            <td ><?php echo $value->em_gender; ?></td>
                                            <td ><?php echo substr("$value->description",0,25). '...' ?> </td>

                                            <td><button class="btn btn-sm btn-success"><?php echo $value->date; ?></button></td>
                                            <td  class="jsgrid-align-center ">
                                                <a href="#" title="Edit" class="btn btn-sm btn-primary waves-effect waves-light uniformsss" data-id="<?php echo $value->id; ?>"><i class="fa fa-pencil-square-o"></i></a>
                                                <a id="delete_uni" href="DeletUniformSlip?D=<?php echo $value->id; ?>" onclick="confirm('Are you sure to delete this value?')" title="Delete" class="btn btn-sm btn-danger waves-effect waves-light"><i class="fa fa-trash-o"></i></a>
                                            </td>

                                            <td ><?php echo $value->shirt; ?></td>
                                            <td ><?php echo $value->s_color; ?></td>
                                            <td ><?php echo $value->pants; ?></td>
                                            <td ><?php echo $value->p_color; ?></td>
                                            <td ><?php echo $value->tie; ?></td>
                                            <td ><?php echo $value->cap; ?></td>
                                            <td ><?php echo $value->ins_stripe; ?></td>
                                            <td ><?php echo $value->crest; ?></td>
                                            <td ><?php echo $value->st_nickle; ?></td>
                                            <td ><?php echo $value->so_pin; ?></td>
                                            <td ><?php echo $value->epaulettes; ?></td>
                                            <td ><?php echo $value->shoes; ?></td>
                                            <td ><?php echo $value->jacket; ?></td>

                                        </tr>
                                        <?php endforeach; ?>
                                    </tbody>
                                </table>

表格按应有的方式填充，但编辑按钮仅单击第一页。以下是我用于数据表的函数。

  $('#uni_table').DataTable({
    "aaSorting": [[1,'asc']],
    dom: 'Bfrtip',
    buttons: [
        'copy', 'csv', 'excel', 'pdf', 'print'
    ]
});

我该如何解决这个问题？下面是该表的屏幕截图。

编辑按钮的功能如下。

            $(document).ready(function () {
                                        $(".uniformsss").click(function (e) {
                                            e.preventDefault(e);
                                            // Get the record's ID via attribute
                                            var iid = $(this).attr('data-id');
                                            $('#btnSubmit').trigger("reset");
                                            $('#exampleModal').modal('show');
                                            $.ajax({
                                                url: 'UniformsByID?id=' + iid,
                                                method: 'GET',
                                                data: '',
                                                dataType: 'json',
                                            }).done(function (response) {
                                                console.log(response);
                                                // Populate the form fields with the data returned from server
                                                $('#btnSubmit').find('[name="id"]').val(response.uniformss.id).end();
                                                $('#btnSubmit').find('[name="emid"]').val(response.uniformss.em_id).end();
                                                $('#btnSubmit').find('[name="slips"]').val(response.uniformss.nos).end();
                                                $('#btnSubmit').find('[name="date"]').val(response.uniformss.date).end();
                                                $('#btnSubmit').find('[name="details"]').val(response.uniformss.description).end();

                                                $('#btnSubmit').find('[name="shirts"]').val(response.uniformss.shirt).end();
                                                $('#btnSubmit').find('[name="shirt_color"]').val(response.uniformss.s_color).end();
                                                $('#btnSubmit').find('[name="pants"]').val(response.uniformss.pants).end();
                                                $('#btnSubmit').find('[name="pants_color"]').val(response.uniformss.p_color).end();

                                                $('#btnSubmit').find('[name="tie"]').val(response.uniformss.tie).end();
                                                $('#btnSubmit').find('[name="cap"]').val(response.uniformss.cap).end();
                                                $('#btnSubmit').find('[name="ins_stripe"]').val(response.uniformss.ins_stripe).end();
                                                $('#btnSubmit').find('[name="crest"]').val(response.uniformss.crest).end();

                                                $('#btnSubmit').find('[name="star_nickle"]').val(response.uniformss.st_nickle).end();
                                                $('#btnSubmit').find('[name="so_pin"]').val(response.uniformss.so_pin).end();
                                                $('#btnSubmit').find('[name="epaulettes"]').val(response.uniformss.epaulettes).end();
                                                $('#btnSubmit').find('[name="shoes"]').val(response.uniformss.shoes).end();

                                                $('#btnSubmit').find('[name="jacket"]').val(response.uniformss.jacket).end();
                                            });
                                        });
                                    });

Answer 1

如果您不调用函数，则对于编辑按钮，位于：

$(document).ready(function () { .... });

当页面准备好时执行一次，但调用它：

$('#uni_table').on('draw.dt', function () { .... });

然后每次桌子完成抽奖时都会调用该函数。请参阅：数据表事件。

每次刷新表格内容时都会进行一次“抽奖”。