提交多个选定的行Jquery数据表

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()，而是使用基本选择器（即$('.selected input').serialize()）在所选行的输入数组上使用serialize()。

＆＃13;

＆＃13;

$(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()
      });
    */
  });
});

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;