I'm trying to create a simple bootstrap table from HTML and JSON input data. For some reason, however, the table header seems to form a separate table (?) with an additional first column. Why is it so?
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css"
integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.18.1/dist/bootstrap-table.min.css">
</head>
<body>
<div class="col-lg-9">
<table data-toggle="table" id="fragmenterTable" data-search="true" data-show-refresh="true"
data-show-toggle="true" data-show-fullscreen="true" data-show-columns="true"
data-show-columns-toggle-all="true" data-detail-view="true" data-show-export="true"
data-click-to-select="true" data-show-pagination-switch="true" data-pagination="true"
data-page-list="[10, 25, 50, 100, all]" data-side-pagination="client">
<thead>
<th data-field="Molecule">
Molecule
</th>
<th data-field="Smiles">
Smiles
</th>
<th data-field="MolWeight">
MolWeight
</th>
<th data-field="HBA">
HBA
</th>
<th data-field="HBD">
HBD
</th>
<th data-field="TPSA">
TPSA
</th>
<th data-field="HeavyAtoms">
HeavyAtoms
</th>
<th data-field="Charge">
Charge
</th>
<th data-field="RingCount">
RingCount
</th>
<th data-field="AromaticRings">
AromaticRings
</th>
<th data-field="AliphaticRings">
AliphaticRings
</th>
<th data-field="RotatableBonds">
RotatableBonds
</th>
<th data-field="cLogP">
cLogP
</th>
<th data-field="MorganFingerprints">
MorganFingerprints
</th>
</thead>
</table>
</div>
</body>
<!-- Include jQuery and other required
files for Bootstrap -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://unpkg.com/tableexport.jquery.plugin/tableExport.min.js"></script>
<script src="https://unpkg.com/bootstrap-table@1.18.1/dist/bootstrap-table.min.js"></script>
<script src="https://unpkg.com/bootstrap-table@1.18.1/dist/extensions/export/bootstrap-table-export.min.js"></script>
<script type="text/javascript">
var in_json = 'fragments_test.json'
$(document).ready(function () {
$('#fragmenterTable').append('<tbody>');
// FETCHING DATA FROM JSON FILE
$.getJSON(in_json,
function (data) {
$.each(data.data, function (key, value) {
var row = '';
row += '<tr>';
for (i = 0; i < value.length; i++) {
if (i == 0) {
row += '<td>' + 'mol2 content' + '</td>';
} else {
row += '<td>' + value[i] + '</td>';
}
}
row += '</tr>';
$('#fragmenterTable').append(row);
});
});
$('#fragmenterTable').append('</tbody>');
});
</script>
My json file looks as follows (fragments_test.json):
{"columns":["Molecule","Smiles","MolWeight","HBA","HBD","TPSA","HeavyAtoms","Charge","RingCount","AromaticRings","AliphaticRings","RotatableBonds","cLogP","MorganFingerprints"],"data":[["CHEMBL155926\n RDKit 2D\n\n 5 4 0 0 0 0 0 0 0 0999 V2000\n 12.7500 -12.1378 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n 13.4649 -12.5497 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n 14.1756 -12.1378 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n 14.8903 -12.5497 0.0000 Cl 0 0 0 0 0 0 0 0 0 0 0 0\n 12.0352 -12.5497 0.0000 Cl 0 0 0 0 0 0 0 0 0 0 0 0\n 1 2 2 0\n 1 5 1 0\n 2 3 1 0\n 3 4 1 0\nM END\n","Cl\/C=C\/CCl",110.97,0,0,0.0,5,0,0,0,0,1,1.98,{}],["\n RDKit 2D\n\n 8 7 0 0 0 0 0 0 0 0999 V2000\n 0.0000 0.0000 0.0000 R 0 0 0 0 0 0 0 0 0 0 0 0\n 7.3288 -19.6010 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n 8.0436 -19.1861 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n 8.7585 -19.6010 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n 8.0436 -18.3656 0.0000 N 0 0 0 0 0 0 0 0 0 0 0 0\n 0.0000 0.0000 0.0000 R 0 0 0 0 0 0 0 0 0 0 0 0\n 9.4733 -19.1861 0.0000 O 0 0 0 0 0 0 0 0 0 0 0 0\n 7.3288 -17.9508 0.0000 O 0 0 0 0 0 0 0 0 0 0 0 0\n 1 2 1 0\n 3 2 1 0\n 4 3 1 0\n 3 5 2 0\n 6 4 1 0\n 4 7 2 0\n 5 8 1 0\nM ISO 2 1 8 6 1\nM END\n","[1*]C(=O)\/C(C[8*])=N\/O",85.06,3,1,49.66,6,0,0,0,0,2,0.04,{}],["\n RDKit 2D\n\n 9 8 0 0 0 0 0 0 0 0999 V2000\n 0.0000 0.0000 0.0000 R 0 0 0 0 0 0 0 0 0 0 0 0\n 16.4212 -8.5322 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n 15.7020 -8.1276 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n 16.4304 -9.3574 0.0000 O 0 0 0 0 0 0 0 0 0 0 0 0\n 14.9893 -8.5402 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n 15.2835 -7.4104 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n 16.1087 -7.4104 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n 14.2766 -8.1318 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n 13.5639 -8.5444 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n 1 2 1 0\n 2 3 1 0\n 2 4 2 0\n 5 3 1 0\n 3 6 1 0\n 3 7 1 0\n 8 5 1 0\n 9 8 1 0\nM ISO 1 1 1\nM END\n","[1*]C(=O)C(C)(C)CCC",113.18,1,0,17.07,8,0,0,0,0,3,2.01,{}],["\n RDKit 2D\n\n 6 5 0 0 0 0 0 0 0 0999 V2000\n 0.0000 0.0000 0.0000 R 0 0 0 0 0 0 0 0 0 0 0 0\n 9.1138 -22.8236 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n 8.3488 -23.2242 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n 9.8460 -23.2884 0.0000 O 0 0 0 0 0 0 0 0 0 0 0 0\n 8.3117 -24.0895 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n 7.6166 -22.7594 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n 1 2 1 0\n 2 3 1 0\n 2 4 2 0\n 3 5 1 0\n 3 6 1 0\nM ISO 1 1 1\nM END\n","[1*]C(=O)C(C)C",71.1,1,0,17.07,5,0,0,0,0,1,0.84,{}],["\n RDKit 2D\n\n 8 7 0 0 0 0 0 0 0 0999 V2000\n 0.0000 0.0000 0.0000 R 0 0 0 0 0 0 0 0 0 0 0 0\n -0.0188 -0.1607 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n -0.4313 0.5510 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n 0.8062 -0.1607 0.0000 O 0 0 0 0 0 0 0 0 0 0 0 0\n -0.0188 1.2669 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n -1.2563 0.5510 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n -0.4313 1.9828 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n 0.8062 1.2669 0.0000 O 0 0 0 0 0 0 0 0 0 0 0 0\n 1 2 1 0\n 2 3 1 0\n 2 4 2 0\n 3 5 1 0\n 3 6 1 0\n 5 7 1 0\n 5 8 1 0\nM ISO 1 1 1\nM END\n","[1*]C(=O)C(C)C(C)O",101.12,2,1,37.3,7,0,0,0,0,2,0.2,{}],["\n RDKit 2D\n\n 7 6 0 0 0 0 0 0 0 0999 V2000\n 0.0000 0.0000 0.0000 R 0 0 0 0 0 0 0 0 0 0 0 0\n 24.9472 -17.9755 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n 25.6590 -17.5645 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n 24.9472 -18.8018 0.0000 O 0 0 0 0 0 0 0 0 0 0 0 0\n 26.3752 -17.9755 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n 25.6590 -16.7425 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n 26.3759 -18.8369 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n 1 2 1 0\n 2 3 1 0\n 2 4 2 0\n 3 5 1 0\n 3 6 1 0\n 5 7 1 0\nM ISO 1 1 1\nM END\n","[1*]C(=O)C(C)CC",85.13,1,0,17.07,6,0,0,0,0,2,1.23,{}]]}
Also, the pagination does not work, I assume it's because of the "detached" header.
Do you have any idea how to fix it?
Thank you!
You should format your json data structure to be like this:
https://examples.bootstrap-table.com/json/data1.json
where for each object will have its own fields:
[
{
"Molecule": "CHEMBL155926\n RDKit 2D\n\n 5 4 0 0 0 0 0 0 0 0999 V2000\n 12.7500 -12.1378 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n 13.4649 -12.5497 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n 14.1756 -12.1378 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n 14.8903 -12.5497 0.0000 Cl 0 0 0 0 0 0 0 0 0 0 0 0\n 12.0352 -12.5497 0.0000 Cl 0 0 0 0 0 0 0 0 0 0 0 0\n 1 2 2 0\n 1 5 1 0\n 2 3 1 0\n 3 4 1 0\nM END\n",
"Smiles": "Cl/C=C/CCl",
"MolWeight": 110.97,
"HBA": 0,
"HBD": 0,
"TPSA": 0.0,
"HeavyAtoms": 5,
"Charge": 0,
"RingCount": 0,
"AromaticRings:": 0,
"AliphaticRings": 0,
"RotatableBonds": 1,
"cLogP": 1.98,
"MorganFingerprints": {}
}
]
After that, you can use the data-url instead of the function that "organizing" the json file as:
<table data-toggle="table" id="fragmenterTable" data-search="true" data-show-refresh="true"
data-show-toggle="true" data-show-fullscreen="true" data-show-columns="true"
data-show-columns-toggle-all="true" data-detail-view="true" data-show-export="true"
data-click-to-select="true" data-show-pagination-switch="true" data-pagination="true"
data-page-list="[10, 25, 50, 100, all]" data-side-pagination="client"
data-url="fragments_test.json">
Once you will provide bootstrap-table the correct formatted json file, it will work perfect.