laravel - 提交时获取数据表中所有选中的项目

Question

我有一个步骤表单，其中包含 jQuery 数据table 中的项目列表。用户将 select 带有复选框的所需项目，单击下一步后，将显示 selected 项目以待最终确定。这是通过 ajax (form.serialize) 完成的。它有效，但是，只有 select 在活动页面上编辑的项目是 considered.Ex。正在显示第 2 页，仅提交该页面中的复选框

我用foreach来获取勾选的项目

foreach($request->input('ItemNo') as $key => $item_no)

这是我的 table

<table id="supplies_t" class="table table-striped">
  <thead>
    <tr>
      <th><input class="main_chkbx" name="main_chkbx" type="checkbox"></th>
      <th>Item Name</th>
      <th>Description</th>
      <th>Unit</th>
    </tr>
  </thead>
  <tbody>
    @if(isset($supplies))
      @foreach($supplies as $supply)
        <tr id="{{ $supply->ItemName }}">
          <td><input name="ItemNo[]" class="ind_chkbx" value="SUPPLY-{{ $supply->SupplyNo }}" type="checkbox"></td>
          <td>{{ $supply->ItemName }}</td>
          <td>{{ $supply->Description }}</td>
          <td>{{ $supply->UnitName }}</td>
        </tr>
      @endforeach
    @endif
  </tbody>
</table>

Answer 1

原因

jQuery DataTables 出于性能原因从 DOM 中删除了不可见的行。提交表单时，只有可见复选框的数据会发送到服务器。

解决方案是使用 $() API 方法来访问 table.

中的所有元素

解决方案 1. 提交表单

您需要在提交表单时将选中但不存在于 DOM 中的元素 <input type="checkbox"> 转换为 <input type="hidden">。

var table = $('#example').DataTable({
   // ... skipped ...
});

$('form').on('submit', function(e){
   var $form = $(this);

   // Iterate over all checkboxes in the table
   table.$('input[type="checkbox"]').each(function(){
      // If checkbox doesn't exist in DOM
      if(!$.contains(document, this)){
         // If checkbox is checked
         if(this.checked){
            // Create a hidden element 
            $form.append(
               $('<input>')
                  .attr('type', 'hidden')
                  .attr('name', this.name)
                  .val(this.value)
            );
         }
      } 
   });          
});

解决方案 2：通过 Ajax

发送数据

var table = $('#example').DataTable({
   // ... skipped ...
});

$('#btn-submit').on('click', function(e){
   e.preventDefault();

   $.ajax({
      url: '/path/to/your/script.php',
      data: table.$('input[type="checkbox"]').serialize();
   }).done(function(data){
      console.log('Response', data);
   });
});

演示

有关详细信息和演示，请参阅 jQuery DataTables: How to submit all pages form data。

laravel - 提交时获取数据表中所有选中的项目

laravel - Get all checked items in datatable on submit

php

jquery

datatables

laravel-5.2

原因

解决方案 1. 提交表单

解决方案 2：通过 Ajax

演示