Robię stronę przy użyciu panelu startowego i poziomy-tabmenu. Mój pierwszy stół jest dobry w wyrównaniu nagłówka, ale drugi i trzeci nagłówek tabeli są zawalone z ciałem stołu. Oto moja próbka, próbuję, proszę, pomóż mi.nagłówek tabeli zwija się, gdy wiele tabel wewnątrz panelu ładuje się
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>
Więc pierwsza tabela działa rewelacyjnie, ale jeśli dodać drugą tabelę do tego samego ciała panel, nagłówki dostać collapsed.So proszę mi pomóc, dzięki z góry.
mój ajax dla problamatic tabeli:
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'
}
]
});
i metoda użyłem, aby wyodrębnić dane z mysql jest poniżej
$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;
dostarcza dane wyjściowe kodu. Może to pomóc. – Anju
Nie jest jasne, gdzie nagłówek tabeli się zwinie? – Anju
, więc pierwszym obrazem jest druga tabela w treści panelu, a drugi obraz jest pierwszą tabelą w treści panelu – learner