5
我使用引导面板和横向制表符来做页面。我的第一张桌子在标题对齐方面很好,但第二个和第三个桌子标题与表格主体合并。这里是我尝试过的示例,请有人帮助我。当面板体引导程序中有多个表时,表格标题折叠
bootstrap.html
<div class = "panel panel-default">
<div class = "panel-heading">
<ul class = "nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home">Home</a></li>
<li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
<li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
<li><a data-toggle="tab" href="#menu3">Menu 3</a></li>
</ul>
</div>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<div class = "table-responsive">
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="contract_wise" class="table table-bordered table-colstriped table-hover">
<thead>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
</table>
</div>
</div>
<div id="menu1" class="tab-pane fade">
<div class = "table-responsive">
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="sdm_wise" class="table table-bordered table-colstriped table-hover">
<thead>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
</table>
</div>
</div>
<div id="menu2" class="tab-pane fade">
<h3>Menu 2</h3>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
</div>
<div id="menu3" class="tab-pane fade">
</div>
</div>
</div>
所以第一台做工精良,但如果我添加第二个表相同的面板主体,头得到collapsed.So请帮帮我,在此先感谢。
我的AJAX为problamatic表:
jQuery("#sdm_wise").dataTable({
dom: "<'row'<'col-sm-12'Bftri>>" + "<'row'<'col-sm-4'l><'col-sm-8'p>>",
"sAjaxSource": "report_datatable_db.php?mode=sdm_wise_datatable",
"bDestroy": true,
"scrollX": true,
"bInfo": true,
select: true,
buttons: [{
extend: 'collection',
text: 'Export',
buttons:[
{
extend: 'pdfHtml5',
orientation: 'landscape',
pageSize: 'LEGAL',
text: '<i class="fa fa-file-pdf-o">     PDF</i>',
titleAttr: 'PDF'
},
{
extend: 'excelHtml5',
orientation: 'landscape',
pageSize: 'LEGAL',
text: '<i class="fa fa-file-excel-o">     EXCEL</i>',
titleAttr: 'Excel'
},
{
extend: 'csvHtml5',
orientation: 'landscape',
pageSize: 'LEGAL',
text: '<i class="fa fa-file-text-o">     CSV</i>',
titleAttr: 'CSV'
},
{
extend: 'copyHtml5',
orientation: 'landscape',
pageSize: 'LEGAL',
text: '<i class="fa fa-files-o">     COPY</i>',
titleAttr: 'Copy'
}
]
},
{
extend: 'print',
orientation: 'landscape',
pageSize: 'LEGAL'
}
]
});
我使用从MySQL低于提取数据的方法,
$rows = array();
if (mysqli_multi_query($mysqli, $query)) {
do {
if ($result = mysqli_store_result($mysqli)) {
while ($row = $result->fetch_array()) {
$rows[] = $row;
}
$result->free();
}
} while (mysqli_next_result($mysqli));
}
mysqli_free_result($result);
$results = array("aaData"=>$rows);
echo json_encode($results);
exit;
提供您的代码的输出。这可能会有所帮助。 – Anju
目前尚不清楚表头在哪里崩溃? – Anju
所以第一个图像是面板主体中的第二个表格,第二个图像是有问题表格的面板主体 – learner