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;
}