Отправить несколько выбранных строк JQuery Datatables

Question

Я новичок в jquery. Я работаю в Laravel 5.3. Я загружаю jQuery и datatables min.css и min.js через мой шаблон главного blade-сервера. Я потребляю API, чтобы получить список домашнего скота, который принадлежит члену, и выводит с помощью jquery datatables. Каждая строка выбирается так, чтобы пользователь мог выбрать, какие животные они хотят ввести в шоу. Данные datatable разбиты на страницы, и я могу выбирать животных на каждой странице. Однако, когда я нажимаю кнопку «Ввод», все животные на отображаемой на данный момент странице получаются, а не только выбранные, независимо от страницы, однако количество отобранных животных отображается в предупреждении правильно. Что я могу сделать, чтобы исправить это, так что отображаются только выбранные строки?

Мой код:

    <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>