Ajax call not working on datatables pages,except first page

Question

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

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.

Here is my table code:

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

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.

Answer 1

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             

        }
    });
});

Answer 2

You should try something like fnDrawCallback event.

Here is the doc : http://legacy.datatables.net/usage/callbacks#fnDrawCallback

When the datable change, you bind the buttons with the function you want.

JS :

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