Submit all data from DataTable table with checkboxes using jQuery

August 9, 2022

So I have this Data Table [Fig. 1] inside a form which submits the table’s data, the problem is it doesn’t submit all the checked rows in all pages, it only submits what’s shown. Then I found a way to fix that "code on[Fig. 2]" but now yes it submits all data from other pages but how can I like connect and submit layer_box’s value with data-checkid’s value.

The scenario is all the checked rows that’ll be submitted will run a query like this

UPDATE table SET sub_group = **layer_box** WHERE id = **data-checkid's value**

[Fig.1]

<form method="POST" id="manage-layers" name="manage-layers">
    <button class="btn btn-warning" type="submit" id="save_layers">
        <i class="fa fa-save"></i>
        <strong>Save</strong>
    </button>
    <table id="subgrp_layertbl" class="table table-responsive text-dark">
        <thead class="thead-dark">
            <tr>
                <th scope="col">ID</th>
                <th scope="col">Layer Name</th>
                <th scope="col">Associate Layer</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td width="1%">1</td>
                <td width="50%">Value 1</td>
                <td width="30%">
                    <div class="text-center">
                        <input class="form-check-input layer_box" type="checkbox" name="layer_box"  value="12,27" data-checkid="40"  >
                    </div>
                </td>
            </tr>
            <tr>
                <td width="1%">3</td>
                <td width="50%">Value 3</td>
                <td width="30%">
                    <div class="text-center">
                        <input class="form-check-input layer_box" type="checkbox" name="layer_box"  value="14" data-checkid="3"  >
                    </div>
                </td>
            </tr>
            <tr>
                <td width="1%">8</td>
                <td width="50%">Value 8</td>
                <td width="30%">
                    <div class="text-center">
                        <input class="form-check-input layer_box" type="checkbox" name="layer_box"  value="16" data-checkid="8"  >
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</form>

[Fig.2]

<script type="text/javascript">
 $(document).ready(function (){
    var table = $('#subgrp_layertbl').DataTable();
    $('#manage-layers').on('submit', function(e){
      e.preventDefault();
      var data = table.$('input,select,textarea').serializeArray();
      console.log(data);
    });      
  });
</script>