Question

我正在使用datatables.And在桌面上每行都有按钮。

当我点击垃圾按钮时，ajax仅适用于前10行。但是当我转到下一页时，它就不再起作用了。

这是我的表格代码：

    <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部分：

<?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!";
}
?>

我不知道为什么会这样。我想让垃圾按钮适用于每一行数据表。

Answer 1

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

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

        }
    });
});

Answer 2

你应该尝试fnDrawCallback事件。

以下是文档：http://legacy.datatables.net/usage/callbacks#fnDrawCallback

当数据发生变化时，您可以使用所需的功能绑定按钮。

JS ：

$(document).ready( function() {
  $('#example').dataTable( {
    "fnDrawCallback": function( oSettings ) {
      alert( 'DataTables has redrawn the table' );
    }
  } );
} );

除第一页外，Ajax调用不在数据表页面上工作

2 个答案: