DataTables selectall第二页的复选框显示已选中吗？

Question

我正在处理数据表，在这里我已经选择了标题中的所有框复选框，当我单击时可以在其中选择所有tr元素，在这里我有分页，当我转到第二页时选择了selectAll复选框后第二页选择所有检查仍保持选中状态，但是它不应该处于选择状态吗？ 在这里，我只想按页检查所有行，而不要检查第二页

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

您可以将页面更改事件中的复选框设为未选中。

在https://datatables.net/reference/event/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>