jQuery Datatables, How to get all selected checkboxes from EVERY page

问题

I'm trying to get all selected checkboxes via jQuery DataTables. Basically my code does as it should, but I'm only getting the checked boxes of the current DataTables page, I want to get the Data from every page.

I am using this piece of code:

    var data = new Object();

    $.each($('#addUsersToAboTable :checkbox:checked'),function(a,b){
        data[a] = $(this).val();
    });

Here is an example, the result is displayed in the console.

$(document).ready(function(){
  $('#addUsersToAboTable').DataTable();
  
  $('#getDataBtn').on('click',function(){
    var data = new Object();
		
		$.each($('#addUsersToAboTable :checkbox:checked'),function(a,b){
			data[a] = $(this).val();
		});
    
    console.log(data);
  });
});

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet">

<button type="button" id="getDataBtn" class="btn btn-success">Get Data</button>
<table id="addUsersToAboTable" class="table table-hover">
  <thead>
    <tr>
      <th>Firstname</th>
      <th>Lastname</th>
      <th>&nbsp;</th>
    </tr>
  </thead>
  <tbody>
    <tr><td>Max</td><td>Mustermann</td><td><input type="checkbox" value = 1></td></tr>
    <tr><td>Max</td><td>Mustermann</td><td><input type="checkbox" value = 1></td></tr>
    <tr><td>Max</td><td>Mustermann</td><td><input type="checkbox" value = 1></td></tr>
    <tr><td>Max</td><td>Mustermann</td><td><input type="checkbox" value = 1></td></tr>
    <tr><td>Max</td><td>Mustermann</td><td><input type="checkbox" value = 1></td></tr>
    <tr><td>Max</td><td>Mustermann</td><td><input type="checkbox" value = 1></td></tr>
    <tr><td>Max</td><td>Mustermann</td><td><input type="checkbox" value = 1></td></tr>
    <tr><td>Max</td><td>Mustermann</td><td><input type="checkbox" value = 1></td></tr>
    <tr><td>Max</td><td>Mustermann</td><td><input type="checkbox" value = 1></td></tr>
    <tr><td>Max</td><td>Mustermann</td><td><input type="checkbox" value = 1></td></tr>
    <tr><td>Max</td><td>Mustermann</td><td><input type="checkbox" value = 1></td></tr>
    <tr><td>Max</td><td>Mustermann</td><td><input type="checkbox" value = 1></td></tr>
    <tr><td>Max</td><td>Mustermann</td><td><input type="checkbox" value = 1></td></tr>
    <tr><td>Max</td><td>Mustermann</td><td><input type="checkbox" value = 1></td></tr>
    <tr><td>Max</td><td>Mustermann</td><td><input type="checkbox" value = 1></td></tr>
    <tr><td>Max</td><td>Mustermann</td><td><input type="checkbox" value = 1></td></tr>
    <tr><td>Max</td><td>Mustermann</td><td><input type="checkbox" value = 1></td></tr>
    <tr><td>Max</td><td>Mustermann</td><td><input type="checkbox" value = 1></td></tr>
    <tr><td>Max</td><td>Mustermann</td><td><input type="checkbox" value = 1></td></tr>
    <tr><td>Max</td><td>Mustermann</td><td><input type="checkbox" value = 1></td></tr>
    <tr><td>Max</td><td>Mustermann</td><td><input type="checkbox" value = 1></td></tr>
    <tr><td>Max</td><td>Mustermann</td><td><input type="checkbox" value = 1></td></tr>
    <tr><td>Max</td><td>Mustermann</td><td><input type="checkbox" value = 1></td></tr>
    <tr><td>Max</td><td>Mustermann</td><td><input type="checkbox" value = 1></td></tr>
    <tr><td>Max</td><td>Mustermann</td><td><input type="checkbox" value = 1></td></tr>
  </tbody>
</table>
<br><br><br><br>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>

On Button click, I only get the checked boxes of the current page, is there a better way of getting the needed data?

回答1:

You can use datatables row index API to get the index of the clicked row and on every checkbox change the data object can be modified.

$(document).ready(function(){
   var data = new Object();

   var table = $('#addUsersToAboTable').DataTable();

   $('#addUsersToAboTable').on('change', ':checkbox', function () {
     data[table.row($(this).parents('tr').get(0)).index()] = this.checked;
   });

   $('#getDataBtn').on('click',function(){
     console.log(data);
   });
});

Note: Above code saves the value as true/false while you save it as 0/1 but I hope the logic here is clear

Snippet:

$(document).ready(function(){
  var data = new Object();
  
  var table = $('#addUsersToAboTable').DataTable();
  
  $('#addUsersToAboTable').on('change', ':checkbox', function () {
  	data[table.row($(this).parents('tr').get(0)).index()] = this.checked;
  });
  
  $('#getDataBtn').on('click',function(){
    console.log(data);
  });
});

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet">

<button type="button" id="getDataBtn" class="btn btn-success">Get Data</button>
<table id="addUsersToAboTable" class="table table-hover">
  <thead>
    <tr>
      <th>Firstname</th>
      <th>Lastname</th>
      <th>&nbsp;</th>
    </tr>
  </thead>
  <tbody>
    <tr><td>Max</td><td>Mustermann</td><td><input type="checkbox" value = 1></td></tr>
    <tr><td>Max</td><td>Mustermann</td><td><input type="checkbox" value = 1></td></tr>
    <tr><td>Max</td><td>Mustermann</td><td><input type="checkbox" value = 1></td></tr>
    <tr><td>Max</td><td>Mustermann</td><td><input type="checkbox" value = 1></td></tr>
    <tr><td>Max</td><td>Mustermann</td><td><input type="checkbox" value = 1></td></tr>
    <tr><td>Max</td><td>Mustermann</td><td><input type="checkbox" value = 1></td></tr>
    <tr><td>Max</td><td>Mustermann</td><td><input type="checkbox" value = 1></td></tr>
    <tr><td>Max</td><td>Mustermann</td><td><input type="checkbox" value = 1></td></tr>
    <tr><td>Max</td><td>Mustermann</td><td><input type="checkbox" value = 1></td></tr>
    <tr><td>Max</td><td>Mustermann</td><td><input type="checkbox" value = 1></td></tr>
    <tr><td>Max</td><td>Mustermann</td><td><input type="checkbox" value = 1></td></tr>
    <tr><td>Max</td><td>Mustermann</td><td><input type="checkbox" value = 1></td></tr>
    <tr><td>Max</td><td>Mustermann</td><td><input type="checkbox" value = 1></td></tr>
    <tr><td>Max</td><td>Mustermann</td><td><input type="checkbox" value = 1></td></tr>
    <tr><td>Max</td><td>Mustermann</td><td><input type="checkbox" value = 1></td></tr>
    <tr><td>Max</td><td>Mustermann</td><td><input type="checkbox" value = 1></td></tr>
    <tr><td>Max</td><td>Mustermann</td><td><input type="checkbox" value = 1></td></tr>
    <tr><td>Max</td><td>Mustermann</td><td><input type="checkbox" value = 1></td></tr>
    <tr><td>Max</td><td>Mustermann</td><td><input type="checkbox" value = 1></td></tr>
    <tr><td>Max</td><td>Mustermann</td><td><input type="checkbox" value = 1></td></tr>
    <tr><td>Max</td><td>Mustermann</td><td><input type="checkbox" value = 1></td></tr>
    <tr><td>Max</td><td>Mustermann</td><td><input type="checkbox" value = 1></td></tr>
    <tr><td>Max</td><td>Mustermann</td><td><input type="checkbox" value = 1></td></tr>
    <tr><td>Max</td><td>Mustermann</td><td><input type="checkbox" value = 1></td></tr>
    <tr><td>Max</td><td>Mustermann</td><td><input type="checkbox" value = 1></td></tr>
  </tbody>
</table>
<br><br><br><br>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>

Hope this helps.

来源：https://stackoverflow.com/questions/51944933/jquery-datatables-how-to-get-all-selected-checkboxes-from-every-page

标签

jquery

html

datatables