I haven't found the exact answer that how to insert and update data in bootstrap table.
The data is ing from a URL in JSON format.
I have to use multiple URLs in a same table.
I haven't found the exact answer that how to insert and update data in bootstrap table.
The data is ing from a URL in JSON format.
I have to use multiple URLs in a same table.
Share Improve this question edited Jul 8, 2015 at 10:56 Mysteryos 5,7913 gold badges34 silver badges54 bronze badges asked Jul 8, 2015 at 9:29 Ritesh MathurRitesh Mathur 8292 gold badges8 silver badges17 bronze badges2 Answers
Reset to default 7<html>
<head>
<!-- Latest piled and minified CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare./ajax/libs/bootstrap-table/1.8.1/bootstrap-table.css">
<!-- Latest piled and minified JavaScript -->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare./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 ing 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
Say the json data is held in a javascript array called myList at index 0 & you are inserting into myTable, use the 'insertRow' option for bootstrap table to insert as the last row at the end of the table, as below:
var rowId = $("#myTable >tbody >tr").length;
$(myTable).bootstrapTable('insertRow',{
index: rowId,
row: myList[0]
});