DataTables selectall Checkbox in second page shows selected?

Question

am working on Data Tables, here i have select all box checkbox in header, where i can select all tr elements when i click on that, here i have pagination, after selecting selectAll check box when i go to second page here in second page select all check is remains selected, but it shouldn't be in state of selected? Here i want to checkall rows as per page only, but not in second page

$(document).ready(function() {
  var table = $('#example').DataTable({
    'ajax': 'https://api.myjson.com/bins/1us28',
    'columnDefs': [{
      'targets': 0,
      'searchable': false,
      'orderable': false,
      'className': 'dt-body-center',
      'render': function(data, type, full, meta) {
        return '<input type="checkbox" name="id[]" value="' +
          $('<div/>').text(data).html() + '">';
      }
    }],
    'order': [1, 'asc']
  });

  $('body').on('change', '#selectAllAgents', function() {
    var rows, checked;
    rows = $('#example').find('tbody tr');
    checked = $(this).prop('checked');
    $.each(rows, function() {
      var checkbox = $($(this).find('td').eq(0)).find('input').prop('checked', checked);
    });
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css" rel="stylesheet" />


<form id="frm-example" action="/path/to/your/script" method="POST">

  <table id="example" class="display" cellspacing="0" width="100%">
    <thead>
      <tr>
        <th><input name="select_all" value="1" id="selectAllAgents" type="checkbox" /></th>
        <th>Name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Extn.</th>
        <th>Start date</th>
        <th>Salary</th>
      </tr>
    </thead>
    <tfoot>
      <tr>
        <th></th>
        <th>Name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Extn.</th>
        <th>Start date</th>
        <th>Salary</th>
      </tr>
    </tfoot>
  </table>
</form>

Answer 1

You can make the checkbox as unchecked on page change event.

Check the event on: https://datatables.net/reference/event/page Datatable Site.

Edit: Changes made to save to select box value on each page change with a variable. so it will manage the check state on each page.

  var pageChecked = [];
	$(document).ready(function() {
	  var table = $('#example').DataTable({
		'ajax': 'https://api.myjson.com/bins/1us28',
		'columnDefs': [{
		  'targets': 0,
		  'searchable': false,
		  'orderable': false,
		  'className': 'dt-body-center',
		  'render': function(data, type, full, meta) {
			return '<input type="checkbox" name="id[]" value="' +
			  $('<div/>').text(data).html() + '">';
		  }
		}],
		'order': [1, 'asc']
	  });

	  $('#example').on( 'page.dt', function () {
		var info = table.page.info();
		var checked = false;
		if(pageChecked[info.page])
		{
		checked = true;
		}
		$('#selectAllAgents').prop('checked', checked);
	  });

	  $('body').on('change', '#selectAllAgents', function() {
		var rows, checked;
		rows = $('#example').find('tbody tr');
		checked = $(this).prop('checked');
		var info = table.page.info();
		pageChecked[info.page] = checked;
		$.each(rows, function() {
		  var checkbox = $($(this).find('td').eq(0)).find('input').prop('checked', checked);
		});
	  });
	});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css" rel="stylesheet" />


<form id="frm-example" action="/path/to/your/script" method="POST">

  <table id="example" class="display" cellspacing="0" width="100%">
    <thead>
      <tr>
        <th><input name="select_all" value="1" id="selectAllAgents" type="checkbox" /></th>
        <th>Name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Extn.</th>
        <th>Start date</th>
        <th>Salary</th>
      </tr>
    </thead>
    <tfoot>
      <tr>
        <th></th>
        <th>Name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Extn.</th>
        <th>Start date</th>
        <th>Salary</th>
      </tr>
    </tfoot>
  </table>
</form>