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 >
<div id="toolbar">
<button id="consigned" data-toggle="modal" data-target="#modal_form" disabled><i ></i> Consign Selected</button>
</div>
<div id="modal_form" role="dialog">
<div >
<!-- Modal content-->
<div >
<div >
<button type="button" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 >Consign Multiple Entries</h4>
</div>
<form action="#" id="form" >
<div >
<input type="hidden" value="" name="no"/>
<div >
<div >
<p >Are you sure you want to consign the selected items?</p>
<div >
<select name="consigned" style="visibility:hidden;" required readonly>
<option value="Yes">Yes</option>
</select>
</div>
</div>
<div >
<!-- below list_check shows the IDs of the rows selected -->
<label >* This is supposed to be hidden value</label>
<div >
<input name='list_check'>
</div>
</div>
</div>
</div>
<div >
<button type="button" data-dismiss="modal"><span ></span> Cancel</button>
<button type="submit" id="btnConsign" ><span ></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" >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>
CodePudding user response：
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>