如何从数据表中获取所有复选框数据的id

Question

我在所有行中都使用了复选框，这样当每个复选框被选中时，我会得到它们的Id，一切都很好，我实现了什么，但问题是，我只得到datatable的特定页面的选中Id。意味着如果我在第1页选中了一个数据的复选框，在第2页也选中了另一个数据的复选框，那么当我提交时，我只得到第2页的数据。我想要的是我应该从page1, page2, page3等中获取数据的Id。

这是我所有数据的来源

@foreach($data as $key => $question_bank)
<tr id="{{ $question_bank->id }}">
<td>

<input type="checkbox" data-id="{{ $question_bank->id }}" class="add_check">
</td>
<td>{{++$i}}</td>
<td>{{ $question_bank->questionCategory->category }}</td>
<td>{{$question_bank->question}}</td>


</tr>
@endforeach
<button type="submit" id="add_to" class="mt-3 btn btn-primary float-right">Add</button>

这是我的jquery部分

$(document).on('click','#add_to',function(e){
e.preventDefault();
var questionids_arr = [];
$("input:checkbox[class=add_check]:checked").each(function () {
questionids_arr.push($(this).attr('data-id'));
});
console.log(questionids_arr);

return false;
});

Answer 1

我认为你想有这两个喜欢添加或删除项目在数组以及它将在数据表的分页工作。我找到了一个有效的解决方案，你可以检查它是否适用于你datatable中的复选框需要捕获所有选中的值

Answer 2

您需要将检查过的id保存到表单的隐藏字段中。

<input type="hidden" id="selectedValues" name="selectedValues">

添加onclick()复选框，并将以下函数添加到javascript中

function addRemove(id){
// const selectedIds = $('#selectedValues').val();
var selectedIds = JSON.parse($('#selectedValues').val());

console.log(selectedIds);
if($('#' + id).is(":checked")){
//Add if id not there in array
selectedIds.push(id);
}else{
//Remove from the array
selectedIds = selectedIds.filter(function(item) {
return item !== id
})
}

$("#selectedValues").val(JSON.stringify(selectedIds));
console.log(selectedIds)
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike" onclick="addRemove('vehicle1')"> Bike
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car" onclick="addRemove('vehicle2')"> Car

<input type="hidden" name="selectedValues" id="selectedValues" value="[]">

Answer 3

在DataTable中，您可以使用以下命令来选择一行并将其推入数组，因为即使在页面之间切换，table.rows( {selected: true} ).every也会保留所选内容。

table.on('select.dt', function(){
const arr = [];
table.rows( {selected: true} ).every( function (rowIdx, 
tableLoop, rowLoop) {
arr.push(this.data());
});

console.log(arr.length, arr);
});

table.on('deselect.dt', function(){
const arr = [];
table.rows( {selected: true} ).every( function (rowIdx, tableLoop, rowLoop) {
arr.push(this.data());
});

console.log(arr.length, arr);
});

一个完整的例子可以在JSFiddle 中看到。https://jsfiddle.net/greatrin/ayv0jg53/47/

注意:不是很优化的解决方案，但这就是思路。