提交多個選定的行Jquery Datatables

Question

我是jquery的新手。我在Laravel 5.3工作。我通過我的主刀片模板加載jquery和datatables min.css和min.js。我正在使用API​​來獲取屬於成員的牲畜列表並使用jQuery數據表輸出。每行都是可選擇的，因此用戶可以選擇他們想要進入節目的動物。數據表是分頁的，我可以在每個頁面上選擇動物。然而，當我點擊Enter Show時，當前顯示的頁面上的所有動物都會被提交，而不僅僅是被選中的那些，而不管頁面如何，但是，選中的動物數量會正確顯示在警報中。我能做些什麼來解決這個問題，只有選定的行被提交？

我的代碼：

    <form action="/entershowoptions" method="POST" id="entriesSelected"> 
        <input type="hidden" name="_token" value="{{ csrf_token() }}"> 
        <input type="hidden" name="show_id" value="{{ $show_id }}"> 
        <input type="hidden" name="memberId" value="{{ $memberId }}"> 
        <table id="goatTable" class="display" cellspacing="0" width="100%"> 
         <thead> 
          <th>Reg #</th> 
          <th>Name</th> 
          <th>DOB</th> 
          <th>Sex</th> 
         </thead> 
         <tbody> 
         @foreach($mygoatsarray as $mygoat) 
          @if($buckDivisionCount < 1 && $mygoat->GOAT_SEX == 'BUCK') 
           @continue 
          @elseif($doeDivisionCount < 1 && $mygoat->GOAT_SEX == 'DOE') 
           @continue 
          @else 
          <tr> 
           <td>{{ $mygoat->OLD_REG_NUM }} 
           <input type="hidden" name="entry_reg_num[]" value="{{ $mygoat->OLD_REG_NUM }}"></td> 
           <td>{{ $mygoat->GOAT_NAME }} 
           <input type="hidden" name="entry_reg_name[]" value="{{ $mygoat->GOAT_NAME }}"></td> 
           <td>{{ $mygoat->DATE_OF_BIRTH }} 
           <input type="hidden" name="entry_dob[]" value="{{ $mygoat->DATE_OF_BIRTH }}"></td> 
           <td>{{ $mygoat->GOAT_SEX }} 
           <input type="hidden" name="entry_sex[]" value="{{ $mygoat->GOAT_SEX }}"></td> 
          </tr> 
          @endif 
         @endforeach 
         </tbody> 
        </table> 
        <br><br> 
        <button id="submit">Enter Goats</button> 
        <br><br> 
        </form> 
       </center> 
       <br><br> 
       </div> 
       <script type="text/javascript"> 
        $(document).ready(function() { 
         var table = $('#goatTable').DataTable(); 

         $('#goatTable tbody').on('click', 'tr', function() { 
          $(this).toggleClass('selected'); 
         }); 

         $('#submit').click(function() { 
          alert(table.rows('.selected').data().length +' row(s) selected'); 

          $.ajax({ 
           type: "POST", 
           url: "/entershowoptions", 
           data: {'form': $("#entriesSelected").table.rows('.selected').serialize()} 
          }); 

         }); 
        }); 
       </script> 

Answer 1

添加調用preventDefault()的事件（事件回調的第一個參數），以防止從形式提交，然後它會運行.ajax()提交。在下面的例子中嘗試：

編輯：

代替使用$("#entriesSelected").table.rows('.selected').serialize()，採用了基本的選擇一個在所選擇的行的輸入陣列上使用serialize() - 即$('.selected input').serialize()。

$(document).ready(function() { 
 
    var table = $('#goatTable').DataTable(); 
 

 
    $('#goatTable tbody').on('click', 'tr', function() { 
 
     $(this).toggleClass('selected'); 
 
    }); 
 

 
    $('#submit').click(function (e) { 
 
    e.preventDefault(); 
 
    var selectedRowInputs = $('.selected input'); 
 

 
    //use the serialized version of selectedRowInputs as the data 
 
    //to be sent to the AJAX request 
 

 
    console.log('serlialized inputs: ',selectedRowInputs.serialize()); 
 
    /* 
 
     $.ajax({ 
 
     type: "POST", 
 
     url: "/entershowoptions", 
 
     data: selectedRowInputs.serialize() 
 
     }); 
 
    */ 
 
    }); 
 
});

<link href="//cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="//cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script> 
 
<form action="/entershowoptions" method="POST" id="entriesSelected"> 
 
    <input type="hidden" name="_token" value="23523"> 
 
    <input type="hidden" name="show_id" value="533"> 
 
    <input type="hidden" name="memberId" value="4567"> 
 
    <table id="goatTable" class="display" cellspacing="0" width="100%"> 
 
    <thead> 
 
     <tr> 
 
     <th>Reg #</th> 
 
     <th>Name</th> 
 
     <th>DOB</th> 
 
     <th>Sex</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr> 
 
     <td>1<input type="hidden" name="entry_reg_num[]" value="1"></td> 
 
     <td>Dan<input type="hidden" name="entry_reg_name[]" value="Dan"></td> 
 
     <td>01/03/2010<input type="hidden" name="entry_dob[]" value="01/03/2010"></td> 
 
     <td>Male<input type="hidden" name="entry_sex[]" value="Male"></td> 
 
     </tr> 
 
     <tr> 
 
     <td>2<input type="hidden" name="entry_reg_num[]" value="2"></td> 
 
     <td>Elsa<input type="hidden" name="entry_reg_name[]" value="Elsa"></td> 
 
     <td>02/03/2011<input type="hidden" name="entry_dob[]" value="02/03/2011"></td> 
 
     <td>female<input type="hidden" name="entry_sex[]" value="female"></td> 
 
     </tr> 
 
     <tr> 
 
     <td>3<input type="hidden" name="entry_reg_num[]" value="3"></td> 
 
     <td>Fred<input type="hidden" name="entry_reg_name[]" value="Fred"></td> 
 
     <td>03/03/2012<input type="hidden" name="entry_dob[]" value="03/03/2012"></td> 
 
     <td>Male<input type="hidden" name="entry_sex[]" value="Male"></td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
    <button id="submit">Enter Goats</button> 
 
</form>