Html 具有分离标头的引导表
我试图从HTML和JSON输入数据创建一个简单的引导表。然而，出于某种原因，表头似乎形成了一个单独的表（？），其中有一个附加的第一列。为什么会这样Html 具有分离标头的引导表,html,bootstrap-table,Html,Bootstrap Table,我试图从HTML和JSON输入数据创建一个简单的引导表。然而，出于某种原因，表头似乎形成了一个单独的表（？），其中有一个附加的第一列。为什么会这样 <!doctype html> <html lang="en"> <head> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/b
<!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>
谢谢大家! 您应该将json数据结构格式化为以下格式：
https://examples.bootstrap-table.com/json/data1.json[
{
"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": {}
}
]
数据urljson
一旦您提供了格式正确的
jsonbootstrap table数据格式化程序[
{
"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": {}
}
]