Ajax调用不适用于数据表页面(第一页除外) [英] Ajax call not working on datatables pages,except first page

问题描述

我正在使用数据表.在表的每一行上都有一个按钮.

i am using datatables.And on the table there is button on each row.

当我单击垃圾箱按钮时，ajax仅适用于前10行.但是当我转到下一页时，它将不再起作用.

When I click on the trash button,ajax works only for the first 10 row. But when I move on to next pages it does not work anymore.

这是我的表格代码:

    <script type="text/javascript" language="javascript" src="//cdn.datatables.net/plug-ins/725b2a2115b/integration/bootstrap/3/dataTables.bootstrap.js"></script>
    <script type="text/javascript" charset="utf-8">
        $(document).ready(function() {
            $('#example').dataTable();
        } );
    </script>

      <table id="example" class="table table-bordered">
    <thead>
    <tr>
        <th class="success">Id</th>
        <th class="success">Image</th>
        <th class="success">Title</th>
        <th class="success">Action</th>
    </tr>
    </thead>
    <tbody>
        <?php
        $query = mysqli_query($connect,"SELECT * FROM movie");
        while ($result = mysqli_fetch_row($query)){
            echo'
                    <tr>
                        <td>'.$result[0].'</td>
                        <td><img class="img-responsive" style="max-height:50px;" src="'.$result[5].'"></td>
                        <td>'.$result[1].'</td>
                        <td>
                        <div class="btn-group" data-toggle="buttons">
                          <label id="remID" class="btn btn-sm btn-default">
                          <span class="text-danger glyphicon glyphicon-trash"></span>
                          </label>
                          <label class="btn btn-sm btn-default">
                          <span class="text-primary glyphicon glyphicon-edit"></span>
                          </label>
                        </div> 
                        </td>
                    </tr>

            ';
            echo'
<script>
$(document).ready(function(){
  $("#remID").click(function(){
    $.post("remMovie.php",
    {
      id:"'.$result[0].'"
    },
    function(data,status){
    alert(status);
    });
  });
});
</script>
';
        }
        ?>
    </tbody>
  </table>

这是我的ajax操作PHP的一部分:

Here is my PHP part of ajax action:

<?php
include('adminchk.php');
include('config.php');
$movieID = $_POST['id'];
$query = mysqli_query($connect,"DELETE from movie where id='$movieID'");
if ($query){
    echo"movie deleted";
}
else {
    echo"ERROR!";
}
?>

我不知道为什么会这样.我希望垃圾桶按钮可用于数据表的每一行.

I dont know why this is happening.I want the trash button to work for every row of datatable.

推荐答案

要在对数据表进行分页(基本上是重绘)后执行任何代码，您需要在内添加 fnDrawCallback 函数.dataTabale()方法.重新绘制表格后，将在回调函数中编写的所有代码都将起作用.这是一个例子...

To execute any Code after the Data Table has been paginated (basically redrawn), you need to add fnDrawCallback function inside .dataTabale() method. All codes written inside the Callback function will work after the table has been redrawn. Here is an example...

$(document).ready( function() {
    $('#example').dataTable({
        "fnDrawCallback": function( oSettings ) {

            // Write any code (also ajax code that you want to execute)
            // that you want to be executed after 
            // the table has been redrawn             

        }
    });
});

这篇关于Ajax调用不适用于数据表页面(第一页除外)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！