javascript - DataTables selectall Checkbox 在第二页显示选中？

Question

我正在处理数据表，这里我选择了标题中的所有框复选框，当我点击它时我可以选择所有 tr 元素，这里我有分页，当我转到第二页时选择 selectAll 复选框second page select all check is remains selected, but it shouldn't be in the state of selected？在这里我只想检查每页的所有行，而不是第二页

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