在 jquery 数据表中提交表单

Question

我在 jquery 数据表中有一些表单复选框输入。当我提交表单时，只会提交当前页面内的输入。请看一下这段代码：

<form action="update.php" method="POST" role="form">
 <table id="sampleTable">
  <thead>
    <tr>
      <th style="width: 50%;"> first </th>
      <th style="width: 50%;"> second </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="checkbox" name="first[]" value="first" checked/>first</td>
      <td><input type="checkbox" name="second[]" value="second"/>second</td>
    </tr>
    <tr>
      <td><input type="checkbox" name="first[]" value="first" checked/>first</td>
      <td><input type="checkbox" name="second[]" value="second"/>second</td>
    </tr>
    <tr>
      <td><input type="checkbox" name="first[]" value="first" checked/>first</td>
      <td><input type="checkbox" name="second[]" value="second"/>second</td>
    </tr>
    <tr>
      <td><input type="checkbox" name="first[]" value="first" checked/>first</td>
      <td><input type="checkbox" name="second[]" value="second"/>second</td>
    </tr>
    <tr>
      <td><input type="checkbox" name="first[]" value="first" checked/>first</td>
      <td><input type="checkbox" name="second[]" value="second"/>second</td>
    </tr>
    <tr>
      <td><input type="checkbox" name="first[]" value="first" checked/>first</td>
      <td><input type="checkbox" name="second[]" value="second"/>second</td>
    </tr>
    <tr>
      <td><input type="checkbox" name="first[]" value="first" checked/>first</td>
      <td><input type="checkbox" name="second[]" value="second"/>second</td>
    </tr>
    <tr>
      <td><input type="checkbox" name="first[]" value="first" checked/>first</td>
      <td><input type="checkbox" name="second[]" value="second"/>second</td>
    </tr>
  </tbody>
  </table>
 <button type="submit" id="submit-btn">send</button>
 </form>



var table = $('#sampleTable').DataTable({
"pageLength": 2
});

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

https://jsfiddle.net/rodinmehr/ba8d1s57/7/

如您所见，尽管有更多已检查的输入，但只会提交两个已检查的输入。我的假设是数据表会禁用其他页面，因此它也会影响输入。您知道问题出在哪里吗？我该如何解决？任何建议将不胜感激:)

Answer 1

我找到了一个非常简单的解决方案（可能不是最好的，但很有效！）。当你想提交表单时，只需像这样销毁 jquery 数据表：

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

在此之后，您的表单将在没有数据表的情况下提交，因此您将拥有所有输入。

在 jquery 数据表中提交表单

Submitting form in the jquery datatable

javascript

jquery

datatables