Ich habe nicht die genaue Antwort gefunden, wie Sie Daten in der Bootstrap-Tabelle einfügen und aktualisieren.Wie Sie Daten in der Bootstrap-Tabelle einfügen und aktualisieren?
Die Daten stammen von einer URL im JSON-Format.
Ich muss mehrere URLs in einer Tabelle verwenden.
<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>
Wenn die Daten aus einer API als JSON kommt, müssen Sie zuerst die JSON aus dem API-Endpunkt herunterladen und speichern sie in einer JavaScript-Variablen und Last
Sagen Sie den json Daten werden in einem Javascript-Array namens myList bei Index 0 & Sie in myTable einfügen, verwenden Sie die Option 'insertRow' für Bootstrap-Tabelle als letzte Zeile am Ende der Tabelle einfügen, wie folgt:
var rowId = $("#myTable >tbody >tr").length;
$(myTable).bootstrapTable('insertRow',{
index: rowId,
row: myList[0]
});
hows diese "load" -Methode ist anders als $ ('# table'). BootstrapTable ({ data: mydata }); –