Menu
I haven't found the exact answer that how to insert and update data in bootstrap table.
The data is coming from a URL in JSON format.
I have to use multiple URLs in a same table.
452
Set true to enable auto refresh. This is the state auto refresh will be in when the table loads. Clicking the button toggles this property. This is simply the default state of auto refresh as the user can always change it by clicking the button.
Responsive TablesThe .table-responsive class creates a responsive table. The table will then scroll horizontally on small devices (under 768px).
table-hover class, a light gray background will be added to rows while the cursor hovers over them. You can try to run the following code to implement the table-hover class −
The Bootstrap DataTable is an advanced plugin to combine advanced data operation of the table. The Bootstrap4 DataTable is an advanced design and modify the version of the bootstrap table. The Bootstrap4 DataTable provides JavaScript validation and cascading style sheet design without any configuration.
<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.8.1/bootstrap-table.css">
<!-- Latest compiled and minified JavaScript -->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.8.1/bootstrap-table.js"></script>
</head>
<body>
<div style="margin : 100px;">
<button class="btn-primary btn" onclick="load();" >Load Table</button>
<button class="btn-primary btn" onclick="reload();">Update Table</button>
</div>
<table class="table" id="table">
<thead>
<tr>
<th data-field="id">Item ID</th>
<th data-field="name">Item Name</th>
<th data-field="price">Item Price</th>
</tr>
</thead>
</table>
<script>
$('#table').bootstrapTable({});
function load(){
var data = [{
id: 1,
name: 'Item 1',
price: '$1'
}, {
id: 2,
name: 'Item 2',
price: '$4'
}];
$('#table').bootstrapTable("load", data);
}
function reload(){
var data = [{
id: 3,
name: 'Item 3',
price: '$2'
}, {
id: 4,
name: 'Item 4',
price: '$6'
}];
$('#table').bootstrapTable("load", data);
}
</script>
</body>
</html>
If the data is coming from an API as JSON, you need to first download the JSON from the API endpoint and store it in a javascript variable and load
Demo on JSFiddle
74
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
