How do you add Bootstrap buttons in Bootstrap Table
How do you add Bootstrap buttons in Bootstrap Table
Asked Answered
I've already figured out the solution. I'd like to share it with everyone.
This is my table:
<table
id="table"
data-toggle="table"
data-pagination="true"
data-url="data/RegisteredVisitors.json"
data-show-refresh="true"
data-show-toggle="true"
data-show-columns="true"
data-search="true"
data-show-pagination-switch="true"
data-id-field="visitor_id"
data-page-list="[10, 25, 50, 100, ALL]"
data-show-footer="false">
<thead>
<tr>
<th data-field="visitor_id" data-checkbox="false" >#</th>
<th data-field="visitor_number" data-formatter="VisitorDetails">Visitor #</th>
<th data-field="visitor_names" data-formatter="VisitorDetails" data-sortable="true">Visitor Names</th>
<th data-field="phone_number" data-sortable="true">Phone Number</th>
<th data-field="matter_type" data-sortable="true">Matter Type</th>
<th data-field="office_name" data-sortable="true">Office Attending</th>
<th data-field="time_in" data-sortable="true">Time In</th>
<th data-field="time_out" data-sortable="true">Time Out</th>
<th data-field="last_visit" data-sortable="true">Last Visit</th>
<th data-formatter="TableActions">Action</th>
</tr>
</thead>
</table>
This is my jQuery function
function TableActions (value, row, index) {
return [
'<a class="like" href="javascript:void(0)" title="Edit">',
'<i class="glyphicon glyphicon-pencil"></i>',
'</a> ',
'<a class="danger remove" href="javascript:void(0)" data-visitorserial="'+row.visitor_id+'" data-visitornames="'+row.visitor_names+'" data-visitorid="'+row.visitor_number+'" data-toggle="modal" data-target="#VisitorDelete" title="Remove">',
'<i class="glyphicon glyphicon-trash"></i>',
'</a>'
].join('');
}
Finally got it running.
<table class="table table-hover">
<thead>
<tr>
<th>Button</th>
</tr>
</thead>
<tbody>
<tr>
<td><button type="button" class="btn btn-primary">button</button></td>
</tr>
</tbody>
</table>@Joseph Daudi answer is good, and I would like to make some additions.
create a custom fieldfor example tableAction 👈 see a runnable example and use formatted set the value
formatter: (value, row, index, field) => {
curID = row[UNIQUE_ID]
return [
`<button type="button" class="btn btn-default btn-sm" onclick="deleteItem(${curID})">`,
`<i class="far fa-trash-alt"></i>`,
`</button>`,
`<button type="button" class="btn btn-default btn-sm">`,
`<i class="far fa-thumbs-up"></i>`,
`</button>`
].join('')
}
a runnable example
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<!-- fontawesome 5 -->
<link rel="stylesheet" type="text/css"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"/>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/js/all.min.js"></script>
<!-- jquery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!-- bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<!-- bootstrap-table-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.18.3/bootstrap-table.min.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.18.3/bootstrap-table.min.js"></script>
</head>
<body>
<table id="bs-table" class="table table-striped table-blue"
data-show-columns="true">
</table>
</body>
<script>
const TABLE = document.querySelector("table")
const TABLE_ID = TABLE.getAttribute("id")
const table = $(`#${TABLE_ID}`)
const UNIQUE_ID = 'id'
function createBSTable() {
const columns = [
{field: "id", title: "ID"},
{field: "title", title: "Title"},
{
field: "tableAction", title: "Action",
formatter: (value, row, index, field) => {
curID = row[UNIQUE_ID]
return [
`<button type="button" class="btn btn-default btn-sm" onclick="deleteItem(${curID})">`,
`<i class="far fa-trash-alt"></i>`,
`</button>`,
`<button type="button" class="btn btn-default btn-sm">`,
`<i class="far fa-thumbs-up"></i>`,
`</button>`
].join('')
}
}
]
table.bootstrapTable()
table.bootstrapTable('refreshOptions',
{
columns: columns,
url: "https://jsonplaceholder.typicode.com/photos",
// data: dataArray,
height: 768,
uniqueId: "id",
striped: true,
pagination: true,
sortable: true,
pageNumber: 1,
pageSize: 10,
pageList: [10, 25, 50, 100],
search: true,
showToggle: true,
searchHighlight: true,
}
)
table.bootstrapTable('refresh')
}
function deleteItem(curID) {
if (!confirm('Are you sure you want to delete this item?')) {
return
}
const ids = [curID]
table.bootstrapTable('remove', {
field: UNIQUE_ID,
values: ids,
})
}
(
() => {
window.onload = () => {
createBSTable()
}
}
)()
</script>
</html>Find Icon
- font awesome
- bootstrap-Glyphs I would prefer use fontawesome.
For me, I did this.
<table class="table table-striped">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Operation</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>
<button type="button" class="btn btn-outline-primary" onclick="location.href='#'">Edit</button>
</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>
<button type="button" class="btn btn-outline-primary" onclick="location.href='#'">Edit</button>
</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>
<button type="button" class="btn btn-outline-primary" onclick="location.href='#'">Edit</button>
</td>
</tr>
</tbody>
</table>
you can also try...the following if you are aiming for bootstrap buttons
function TableActions(value, row, index) {
return '<button class="btn btn-primary">Add</button>'
}
© 2022 - 2024 — McMap. All rights reserved.