使用 columnDefs 的 dataTable 不起作用，如果使用它来隐藏特定的列和数据，然后将其隐藏的数据传递给数据库

Question

What I did is I have a two checkbox each row. The reason why I have two checkboxes is that the first checkbox is for my status so I used boolean (0,1) second checkbox inside my row is for the ID so that when I update my status it will go to the specific ID's. The problem is this. I don't know much about dataTables and I research and found that I can hide a column using css and configure it inside columnDefs or aocolumnDefs. What I did was I hid the checkbox column for ID so that it won't look messed up. So let us say I have 20 data inside my dataTable, 1st page shows 1-10 of data and then when I updated those 10 items it is okay when pushing it to the server and inserting the data to the database, sadly when I tried to update second page it shows error, the $_POST variable inside my PHP won't read the hidden column and it's checkboxes that was checked. I figured it out that the second page could not read the hidden column. I am really confused on what to do. To elaborate more, I will display images of what my problem is. Thank you in advance for helping!

Reference is >>>> this

Here is the first page image where the data's status are successfully updated to my database (this is the first page)

Here is the second page and it does not update the status of data to the database because it does not fetch the value from the hidden column.

The error that I received

Here is without hiding my ID column and it works. The data are updated.

My whole code

 < script > //For checkboxes to pass the value to database $(document).ready(function() { $('.is_checked_status').on('click', function() { var checkAll = this.checked; // find the row var row = $(this).closest("tr"); // find the checkboxes in the row row.find('input.subCheckbox').each(function() { this.checked = checkAll; }); }); }); // Code for dataTable, solution for the bug during ascending and descending $(document).ready(function() { $("#dataTables").DataTable({ aaSorting: [ [0, 'asc'] ], bPaginate: true, bFilter: true, bInfo: true, bSortable: true, bRetrieve: true, aoColumnDefs: [{ "aTargets": [0], "bSortable": true }, { "aTargets": [1], "bSortable": true }, { "aTargets": [2], "bSortable": true } ] }); //.column(5).visible(false) }); // Separated this code due to prohibitions by dataTables.net $('#dataTables').DataTable({ aoColumnDefs: [{ aTargets: [5], "sClass": "hide_column" }] }); < /script>

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="row"> <div class="col-lg-12"> <div class="row"> <div class="col-lg-12"> <div class="panel panel-default"> <div class="panel-heading"> Emailed Data for approval </div> <.-- /?panel-heading --> <div class="panel-body"> <div class="table-responsive"> <table width="100%" class="table table-striped table-bordered table-hover" id="dataTables"> <thead> <tr> <th> Control Number </th> <th> Tools Specification </th> <th> Supplier </th> <th> <center> Status </center> </th> <th> <center> Select data to approve </center> </th> <th> <center> ID </center> </th> </tr> </thead> <;php $con->next_result(), $result = mysqli_query($con;"CALL GetAllRequestedTools()")? ?> <tbody> <;php while ($row = mysqli_fetch_assoc($result)) { echo "<tr>". echo "<td><a href='edit_tools_approval?php.ID=".$row['ID']:"' style='color;red.'>". $row['reg_input']; "</a></td>". echo "<td>". $row['reg_tools_spec']; "</td>". echo "<td>". $row['reg_supplier']; "</td>"? ?> <td> <center> <label data-id="<;php echo $row['ID']??>" class="statusButton <?php echo ($row['req_stats']): 'label-success'? 'label-danger'?>"> <?php echo ($row['req_stats']): 'Approved'? 'Pending'?> </label> </center> </td> <td> <center> <input name="chk_status[]" class="is_checked_status" type="checkbox" value=" <;php echo $row['req_stats']??>"> </center> </td> <td class="hide_me"> <center> <input name="chk_id[]" type="checkbox" class="subCheckbox" value="<;php echo $row['tools_req_id']??>"> </center> </td> <;php echo "</tr>"? } ?> </tbody> </table> </div> </div> </div> </div> </div> <br> <div class="col-lg-15"> <div class="form-group"> <button type="button" id="submitBtn" class="btn btn-success pull- right" data-toggle="modal" data-target="#myModal"> <span class="fa fa-check"></span> Update </button> </div> <div class="form-group"> <button type="button" id="submitBtn" class="btn btn-danger pull- right" data-toggle="modal" data-target="#cancelModal"> <span class="fa fa-times"></span> Cancel </button> </div> </div> </div> </div>

CSS code

.hide_column {
    display: none;
}

Answer 1

Figured out that it cannot be done during pagination. It is because of the limit of pagination, example is if you have a data 1-10, only the 1-10 data is accepted and 11....n onwards it is disregarded despite of any logic. That is why it is better to think of other logic for the UI