Bootstrap Table select all and update cell value through modal - php

Question

I currently have a Bootstrap Table displaying some data from a SQL DB with the ability to edit each row seperately with the options Consign, Edit and Delete. Consign simply changes the consign value in the DB from No to Yes.
It's more likely that multiple rows will be consigned at once so the aim is to be able to select mutiple using the built in checkboxes and then click the Consign button on the toolbar. This would then open a modal to confirm the action and then apply the changes to the DB - i.e. change all the selected rows consign value from No to Yes.
I've managed to get the button to only work when the checkboxes are selected and I've also created a modal which appears when clicking the button if it's active. There are a couple of hidden inputs in there for the DB update (a select option showing Yes and today's date).
I guess I'm stuck at the point of how do I get the IDs (called no here) of my rows over to allow the DB to be updated. I've tried to MacGyver a few suggestions on here together but nothing has worked so far, so any suggestions would be immensly appreciated.
This is the code I have so far.
HYML Table - records.php
<div class="datatable-dashv1-list custom-datatable-overright">
<div id="toolbar">
<button id="consigned" class="btn btn-warning btn-md" data-toggle="modal" data-target="#modal_form" disabled><i class="glyphicon glyphicon-check"></i> Consign Selected</button>
</div>
<div class="modal fade" id="modal_form" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Consign Multiple Entries</h4>
</div>
<form action="#" id="form" class="form-horizontal">
<div class="modal-body form">
<input type="hidden" value="" name="no"/>
<div class="form-body">
<div class="form-group">
<p class="text-center">Are you sure you want to consign the selected items?</p>
<div class="col-md-9">
<select class="form-control" name="consigned" style="visibility:hidden;" required readonly>
<option value="Yes">Yes</option>
</select>
</div>
</div>
<div class="form-group">
<!-- below list_check shows the IDs of the rows selected -->
<label class="control-label col-md-3">* This is supposed to be hidden value</label>
<div class="col-md-9">
<input name='list_check'>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Cancel</button>
<button type="submit" id="btnConsign" class="btn btn-success"><span class="glyphicon glyphicon-check"></span> Consign</button>
</div>
</form>
</div>
</div>
</div>
<table id="table" data-toggle="table" data-id-field="no" data-select-item-name="no" data-sort-name="no" data-sort-order="asc" data-pagination="true" data-page-list="[10, 25, 50, 100, 200, All]" data-search="true" data-searchable="true" data-show-columns="true" data-show-pagination-switch="true" data-key-events="true" data-show-toggle="true" data-resizable="true" data-cookie="true"
data-cookie-id-table="saveId" data-show-columns-toggle-all="true" data-show-export="true" data-export-types="['xlsx', 'pdf']" data-export-options="{}" data-click-to-select="true" data-filter-control="true" data-filter-control-visible="true" data-filter-show-clear="true" data-show-refresh="false" data-maintain-meta-data="true" data-cookie="true" data-cookie-id-table="wasteId" data-cookie-expire="3h" data-toolbar="#toolbar">
<thead>
<tr>
<th data-field="selected" data-checkbox="true">Select</th>
<th data-field="no" data-sortable="true" data-sorter="dateSorter" data-visible="false">No</th>
<th data-field="location" data-sortable="true" data-filter-control="select" data-filter-control-placeholder="Select Location">Location</th>
<th data-field="name" data-visible="false">Name</th>
<th data-field="area" data-visible="false">Area</th>
<th data-field="sendto" data-visible="false">Send To</th>
<th data-field="reference">Reference</th>
<th data-field="consigned" data-filter-control="select" data-filter-default="No">Consigned</th>
<th data-field="date_consigned" data-visible="false">Date Consigned</th>
<th data-field="action" class="col-lg-2">Action</th>
</tr>
</thead>
<tbody>
<?php
include 'include/fetch-data.php';
?>
</tbody>
</table>
</div>
PHP fetch-data.php
<?php
include 'include/dbconnect.php';
$sql = "SELECT * FROM Sendlist";
$result = $conn->query( $sql );
if ( $result->num_rows > 0 ) {
while ( $row = $result->fetch_assoc() ) {
echo '<tr>';
echo '<td></td>';
echo '<td>' . $row[ "no" ] . '</td>';
echo '<td>' . $row[ "location" ] . '</td>';
echo '<td>' . $row[ "name" ] . '</td>';
echo '<td>' . $row[ "area" ] . '</td>';
echo '<td>' . $row[ "sendto" ] . '</td>';
echo '<td>' . $row[ "reference" ] . '</td>';
echo '<td>' . $row[ "consigned" ] . '</td>';
echo '<td>' . $row[ "date_consigned" ] . '</td>';
if ( $row[ 'consigned' ] == 'Yes' ) {
echo "<td>
<a href='#consign_" . $row[ 'no' ] . "' class='btn btn-warning btn-sm hide' data-toggle='modal' id='consign' name='consign'><span class='glyphicon glyphicon-check'></span> Consign</a>
<a href='#unconsign_" . $row[ 'no' ] . "' class='btn btn-warning btn-sm' data-toggle='modal' id='unconsign' name='unconsign'><span class='glyphicon glyphicon-check'></span> Unconsign</a>
<a href='#edit_" . $row[ 'no' ] . "' class='btn btn-success btn-sm' data-toggle='modal'><span class='glyphicon glyphicon-edit'></span> Edit</a>
<a href='#delete_" . $row[ 'no' ] . "' class='btn btn-danger btn-sm' data-toggle='modal'><span class='glyphicon glyphicon-trash'></span> Delete</a>
</td>";
}
echo "</tr>";
include( 'include/edit-delete-modal.php' );
echo "</tr>";
}
}
?>
<script>
var $table = $('#table')
var $consigned = $('#consigned')
$(function() {
$table.on('check.bs.table uncheck.bs.table check-all.bs.table uncheck-all.bs.table', function () {
$consigned.prop('disabled', !$table.bootstrapTable('getSelections').length)
})
$consigned.click(function () {
var ids = $.map($table.bootstrapTable('getSelections'), function (row) {
return row.id
})
$table.bootstrapTable('getSelections', {
field: 'no',
values: ids
})
$consigned.prop('disabled', true)
})
})
</script>

Answer 1

Just so others can find the answer if needed in the future, I used the following script to get the IDs of my selected rows to pass them through a hidden input in the modal which will then be later used (with explode) to update SQL entries.
<script type="text/javascript">
var $table = $('#table');
function getRowSelections() {
return $.map($table.bootstrapTable('getSelections'), function(row) {
return row;
})
}
$('#consigned').click(function() {
var selectedRows = getRowSelections();
var selectedItems = '\n';
$.each(selectedRows, function(index, value) {
selectedItems += value.no + ',';
});
$('#modal_form').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget); // Button that triggers the modal
var recipient = button.data('whatever'); // Extract info from data-* attributes
var modal = $(this);
modal.find(".modal-body input[name='list_check']").val(selectedItems);
});
});
</script>