My bootstrap table is currently displaying data that is loaded from a MySQL database. I am looking to enhance it by adding a column with buttons, similar to the layout shown in this image.
https://i.stack.imgur.com/8fWfR.png
However, I am facing some difficulties in incorporating buttons into my script. It's easy when manually creating a table, like this:
<td>
<a href="#" class="btn btn-info btn-xs"><i class="fa fa-pencil"></i> Edit </a>
<a href="#" class="btn btn-danger btn-xs"><i class="fa fa-trash-o"></i> Delete </a>
</td>
But when populating the table with data from the database, the process becomes more complex. This is a snippet of my code:
<table id="table"
data-show-columns="true"
data-height="460">
</table>
Here is the script for loading the data (Please note that I have omitted the list.php file as it primarily deals with PHP scripts for connecting to the database and executing SELECT queries):
<script type="text/javascript">
var $table = $('#table');
$table.bootstrapTable({
url: 'include/list.php',
search: true,
pagination: true,
buttonsClass: 'primary',
showFooter: true,
minimumCountColumns: 2,
columns: [{
field: 'id',
title: 'ID',
sortable: true,
},{
field: 'creation_date',
title: 'Date',
sortable: true,
},{
field: 'latitude',
title: 'Latitude',
sortable: true,
}, ],
});
</script>