Datatable-bootstrap仅适用于第一页。

时间:2015-12-22 15:14:15

标签: javascript php jquery twitter-bootstrap datatable

我是datatable-bootstrap的新手。我有编辑按钮和删除按钮,当我按下编辑按钮,它只在第一页工作正常。从第2页它不起作用。删除后如何刷新数据表(仅表)?

用于刷新表格(删除后)

这段代码只运行一次,如果我再次点击另一个按钮,它就不起作用了

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

数据表的文件

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

1 个答案:

答案 0 :(得分:0)

您应该将$('#vehicle-list').dataTable();作为load功能的回调,因为$(document).ready()仅在页面加载时发生。

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