I have a table that loads data from a js file. The structure of the JS file is:
var dataUp = [{
"id": "1",
"name": "rabiei",
"lastname": "mohammad",
"amount": "15",
"age": "30"
}, {
"id": "2",
"name": "sallar",
"lastname": "hesam",
"amount": "80",
"age": "25"
}, {
"id": "3",
"name": "zara",
"lastname": "name",
"amount": "80",
"age": "25"
}];
$('#table-up').bootstrapTable({
data: dataUp,
showColumns: true,
});
var sub_data = [{
"one": "text one",
"two": "text two",
"three": "text three",
"four": "text four",
"five": "text five",
"six": "text six",
}, {
"one": "text one",
"two": "text two",
"three": "text three",
"four": "text four",
"five": "text five",
"six": "text six",
}, {
"one": "text one",
"two": "text two",
"three": "text three",
"four": "text four",
"five": "text five",
"six": "text six",
}];
function build_sub_table() {
var data = JSON.parse(JSON.stringify(sub_data))
$('#sub_table').bootstrapTable({
columns: [{
title: 'title one',
field: 'one',
sortable: true,
},{
title: 'title two',
field: 'two',
sortable: true,
},{
title: 'title three',
field: 'three',
sortable: true,
},{
title: 'title four',
field: 'four',
sortable: true,
},{
title: 'title five',
field: 'five',
sortable: true,
},{
title: 'title six',
field: 'six',
sortable: true,
}
],
data: data
})
};
function detailFormatter(index, row, element){
return childDetail(index,row)
};
function childDetail(index,row){
var row1 = document.createElement("div");
row1.setAttribute('class','ui one column grid');
var button = document.createElement("button");
button.setAttribute('onclick','build_sub_table()')
button.textContent="load data"
row1.append(button);
var row2 = document.createElement("div");
row1.setAttribute('class','ui one column grid');
var table = document.createElement('table');
table.setAttribute('class','ui very compact table');
table.setAttribute('id','sub_table');
row2.append(table);
row1.append(row2);
return row1;
};
Also, the structure of the HTML file is:
<table
id="table-up"
data-show-refresh="true"
data-search="true"
data-toggle="table-up"
data-toolbar="#toolbar"
data-filter-control="true"
data-show-footer="false"
data-detail-formatter="detailFormatter"
data-detail-view="true"
data-hide-unused-select-options="true"
data-response-handler="responseHandler"
>
<thead>
<tr>
<th data-field="id" data-visible="false">ID</th>
<th data-field="name" data-sortable="true">Name</th>
<th data-field="lastname" data-sortable="true">Last Name</th>
<th data-field="amount" data-sortable="true">Amount</th>
<th data-field="age" data-sortable="true">Age</th>
</tr>
</thead>
</table>
I would like to load this data which is located in the JS file like id , name , lastname , amount , age
from a data.json file.
This json file will be generated by a script. would you please let me know about the solution?
As I understood you want to load data from some json file. Few different approach could be used to achieve that.
// using fetch api
fetch('./data.json').then(response => {
return response.json();
}).then(dataUp => {
$('#table-up').bootstrapTable({
data: dataUp,
showColumns: true,
});
});
const data = require('./data.json');
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.