Question

我正在尝试通过jQuery DataTables获取所有选中的复选框。基本上，我的代码可以实现，但是我只得到当前DataTables页面的复选框，我想从每个页面获取数据。

我正在使用这段代码：

    var data = new Object();

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

这里是一个示例，结果显示在控制台中。

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

单击按钮后，我只会得到当前页面的复选框，是否有更好的方法来获取所需的数据？

Answer 1

您可以使用datatables row index API获取被单击的行的索引，并在每个复选框上进行更改，即可修改data对象。

$(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);
   });
});

注意：上面的代码将值保存为true / false，同时将其保存为0/1，但我希望这里的逻辑清楚

代码段：

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

希望这会有所帮助。

jQuery Datatables，如何从每个页面获取所有选中的复选框

1 个答案: