Datatable (Edit Button) doesn't work on second page

Question

I currently have a table which populates data from my server. However, on the second page and further, the "edit" button no longer works. This issue only happens when I link my table to the Datatable function. Below is the HTML for the table.

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

The table populates as it should but the edit button only clicks on the first page. Below is the function I use for the DataTable.

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

How can I have this fixed? Below is a screenshot of the table.

The Function For The Edit Button Is Below.

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

If you don't call your function, for the edit buttons, on:

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

which does it once when the page is ready, but call it on:

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

then the function will be called every time the table has completed a draw. See: Datatables events.

A "draw" is performed every time the content of the table is refreshed.