Senden Sie mehrere ausgewählte Zeilen Jquery Datatables

Question

Ich bin neu in Jquery. Ich arbeite in Laravel 5.3. Ich lade jquery und datatables min.css und min.js durch meine Master-Blade-Vorlage. Ich benutze eine API, um eine Liste von Tieren zu erhalten, die zu einem Mitglied gehören und mit jquery-Databases ausgeben. Jede Zeile ist auswählbar, so dass der Benutzer auswählen kann, welche Tiere er in eine Show aufnehmen möchte. Die Datentabelle ist paginiert und ich kann Tiere auf jeder Seite auswählen. Wenn ich jedoch auf "Show anzeigen" klicke, werden alle Tiere auf der aktuell angezeigten Seite und nicht nur die ausgewählten Tiere unabhängig von der Seite übermittelt. Die Anzahl der ausgewählten Tiere wird jedoch in der Warnung korrekt angezeigt. Was kann ich tun, um dies zu beheben, sodass nur die ausgewählten Zeilen gesendet werden?

Mein Code:

    <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

einen Anruf In den preventDefault() auf der Veranstaltung (1. Argument der Ereignisrückruf) das Formular von der Abgabe zu verhindern, und dann wird es die .ajax() einreichen laufen. Versuchen, dies in dem folgenden Beispiel:

Edit:

Statt $("#entriesSelected").table.rows('.selected').serialize() zu verwenden, verwenden serialize() auf einer Anordnung der Eingaben in den ausgewählten Zeilen einen Grund Selektor - d.h. $('.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>