Datatable-bootstrap仅适用于第一页。

Question

I'm new to datatable-bootstrap. I have edit button and delete button, when i press edit button, it works fine on first page only.From 2nd page it doesn't work. How to refresh the datatable (only table) after deleting?

For refreshing table(after DELETING)

This code is working only one time, if i click again on another button, it doesn't work

$('table').load(location.href + " table");

php file for datatable

<script>
    $(document).ready(function() {
         $('#vehicle-list').dataTable();         
    } );   
</script>


<table class="table table-hover myTable" id="vehicle-list">
        <thead>
            <tr>
                <th>No</th>
                <th>No plate</th>
                <th>Type</th>
                <th>A/C</th>
                <th>Fuel</th>                    
                <th>Action</th>
            </tr>
        </thead>
        <tbody>
            <?php
                include 'inc/connection.php';

                $que="SELECT * FROM vehicle_register";
                $query_run=mysqli_query($con,$que);
                $no=1;

                while($row=mysqli_fetch_array($query_run))
                {              
            ?>
                <tr>
                    <td><?php echo $no++; ?></td>
                    <td><?php echo $row['no_plate']; ?></td>
                    <td><?php echo $row['vehicle_type']; ?></td>
                    <td><?php echo $row['ac_type']; ?></td>
                    <td><?php echo $row['fuel_type']; ?></td>

                    <td><div class="btn-group"><a class='Edit btn btn-primary' data-toggle="modal" href="#form_modal" data-target="#myModal" data-Id="<?php echo $row['no_plate'];?>">Edit</a><a class='Delete btn btn-danger' data-toggle="modal" href="#form_modal" data-target="#myModal" data-Id="<?php echo $row['no_plate'];?>">Delete</a></div>
    </td>                       

                </tr>
            <?php
                }
                mysqli_close($con);
            ?>
        </tbody>
    </table>

Answer 1

You should call $('#vehicle-list').dataTable(); as a callback for your load function as $(document).ready() is only happening on page load.

$('table').load(location.href + " table", function(){
     $('#vehicle-list').dataTable();
});