在 jquery 数据表中提交表单

Question

I have some form checkbox inputs inside jquery datatable. When I submit the form, only the inputs that are inside the current page would be submitted. Please take a look at this code:

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

As you can see, only two of the checked inputs would be submitted although there are more checked inputs. My assumption is datatable would disable the other pages so it would affect the inputs as well. Do you have any idea what can be the problem and how can I fix this? Any suggestions would be appreciated :)

Answer 1

I found a very easy solution for this (may not be the best, but it works!). When you want to submit the form, just destroy the jquery datatable like this:

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

After this, your form would be submitted without the datatable, so you would have all the inputs.