Submit all data from DataTable table with checkboxes using jQuery

Question

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>

Does this answer your question? jquery Datatables checkbox get all checked rows — andrewJames
– andrewJames, Commented Aug 9, 2022 at 13:01

Kim Taeha · Accepted Answer · 2022-08-09 01:56:47Z

1

I really think this should answer your problem https://stackoverflow.com/a/59550389/10888948 and just add other functions if you ever have more.

answered Aug 9, 2022 at 1:56

Kim Taeha

285 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

andrewJames Over a year ago

Thank you for pointing us in the right direction, but it is better to avoid providing link-only answers. In this case, if the link is to an existing Stack Overflow answer, then the question should be marked as a duplicate. If you do not have sufficient reputation to do that, you should be able to flag the question, instead.

Collectives™ on Stack Overflow

Submit all data from DataTable table with checkboxes using jQuery

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related