laravel 如何在php jquery中从datatable中获取所有选中复选框数据的id

g0czyy6m  于 2023-04-07  发布在  PHP
关注(0)|答案(3)|浏览(129)

我在所有行中使用了复选框,这样当每个复选框被选中时,我将获得它们的ID,我所实现的一切都很好,但问题是我只获得datatable的特定页面的选中ID。然后当我提交时,我只得到了第2页的数据。我想要的是,我应该得到第1页,第2页,第3页等数据的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;
});
2mbi3lxu

2mbi3lxu1#

我想你想有两个像添加或删除数组中的项目,以及它将工作的数据表分页。我发现了它的工作解决方案,你可以检查它是否适合你Checkboxes in DataTables need to capture all checked values

xxb16uws

xxb16uws2#

您需要将选中的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="[]">
u2nhd7ah

u2nhd7ah3#

在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/
注意:不是很优化的解决方案,但这是想法。

相关问题