我在bootstrap崩溃时获得了以下代码，但我需要一个排序选项。由于这个问题，我想用DataTables解决我的问题。有没有使用ajax解决我的问题的选项？我想通过SQL查询填充父表和子项。 Like this example
<?php
$switches = $pdo->prepare("Select d.name AS 'Hostname', GROUP_CONCAT(DISTINCT v.id ORDER BY v.id ASC SEPARATOR ' / ') AS 'VLAN', GROUP_CONCAT(DISTINCT v.name ORDER BY v.name ASC SEPARATOR ' / ') AS 'Location'
FROM device d
INNER JOIN vlan v ON d.deviceId = v.deviceId
GROUP BY d.name");
$result = $switches->execute();
$count = 0;
while ($row = $switches->fetch()) {
echo '<tr class="accordion-toggle">';
echo '<td><button class="btn btn-default btn-xs collapsed" data-toggle="collapse" data-target="#' . ++$count . '"></button></td>';
echo "<td>" . $row['Hostname'] . "</td>";
echo "<td><a>" . $row['VLAN'] . "</a></td>";
echo "<td>" . $row['Location'] . "</td>";
echo '<td>
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</td>';
echo "</tr>";
echo "<tr>";
echo '<td colspan="12" class="hiddenRow"><div class="accordian-body collapse" id=' . $count . '>';
echo '<table class="table table-striped">';
echo "<thead>";
echo '<tr><p><a href="InterfaceIPHere">Interface IP</a></p>';
echo "</tr>";
echo "<tr>";
echo "<th>Hostname</th>";
echo "<th>phys. Port</th>";
echo "<th>Port Type</th>";
echo "<th>VLAN</th>";
echo "<th>Destination Hostname</th>";
echo "<th>Destination Port</th>";
echo "<th>Tagged</th>
</tr>";
echo "</thead>";
echo "<tbody>";
$statement = $pdo->prepare("SELECT a.physikalischerPort as 'phys. Port', a.logischerPort as 'log. Port', pt.type as 'Port Type', GROUP_CONCAT(v.id ORDER BY v.id ASC SEPARATOR ' / ') as VLAN, d2.name as 'Destination Hostname', b.physikalischerPort as 'Destination Port', pt.tagged as 'Tagged'
FROM port a
inner JOIN port b ON a.portId = b.destinationPortId
INNER JOIN device d ON d.deviceId = a.deviceId
INNER JOIN device d2 ON d2.deviceId = b.deviceId
INNER JOIN porttype pt ON pt.porttypeId = a.porttypeId
INNER JOIN vlan v ON v.portId = a.portId
WHERE a.portId = b.destinationPortId AND b.portId = a.destinationPortId AND a.deviceId = '" . $count . "'
GROUP BY a.logischerPort, a.physikalischerPort,d2.name, b.physikalischerPort, pt.type, pt.tagged
ORDER BY (a.physikalischerPort +0) ASC");
$result = $statement->execute();
while ($row = $statement->fetch()) {
echo "<tr>";
echo "<td>" . $row['phys. Port'] . "</td>";
echo "<td>" . $row['log. Port'] . "</td>";
echo "<td>" . $row['Port Type'] . "</td>";
echo "<td>" . $row['VLAN'] . "</td>";
echo "<td>" . $row['Destination Hostname'] . "</td>";
echo "<td>" . $row['Destination Port'] . "</td>";
echo ($row['Tagged'] == '0') ? '<td><i class="glyphicon glyphicon-remove"></i></td>' : '<td><i class="glyphicon glyphicon-ok"></i></td>';
echo "</tr>";
}
echo "</tbody>";
echo "</table>";
echo "</div>";
echo "</td>";
echo "</tr>";
}
?>
结果：Result
Ajax不是填充DataTable的强制源，它只是（广泛使用）选项，允许您在不重新加载页面的情况下保持数据最新（例如，在编辑某些条目或删除它们时）。
你需要做的是一个PHP脚本，它将回显简单的HTML页面，其中包含<head>部分中引用的所有必要的先决条件（包括jQuery和DataTables javascripts和样式表）以及页面<table id="mytable"></table>中的空<body>。
除了上述先决条件之外，您还需要在页面HTML中引用动态创建的javascript，它使用对象数组（从SQL-queres获取）作为父行和子行的DataTables源：
<?php
/* query your database over here and put the result into associative arrays,
turn them into JSON-compliant arrays/objects */
$parentSource = ... //PHP variable that contains JSON for parent rows
$childSource = ... //PHP variable that contains JSON for child rows
$js = <<<JS
$(document).ready(function () {
const parentData = ${$parentSource};
const childData = ${$childSource};
const dataTable = $('#mytable').DataTable({
sDom: 't',
data: parentData,
columns: [
{title: 'Hostname', data: 'hostname'},
{title: 'VLAN', data: 'vlan'},
{title: 'Location', data: 'location'},
],
});
//prepare child DataTable upon clicking parent row
$('#mytable').on('click', 'tr', function(){
const parentRow = dataTable.row($(this));
parentRow.child.isShown() ?
parentRow.child.remove() :
parentRow.child('<table id="details"></table>').show();
$(this).toggleClass('shown');
if(!parentRow.child.isShown()) return;
const detailsData = childData[parentRow.data().hostname];
$('#details').DataTable({
sDom: 't',
data: detailsData,
columns: [
{title: 'Hostname', data: 'hostname'},
{title: 'Port', data: 'port'},
{title: 'Port type', data: 'porttype'},
{title: 'VLAN', data: 'vlan'},
{title: 'Destination host', data: 'dsthost'},
{title: 'Destination port', data: 'dstport'},
]
});
});
});
JS;
/* here should go the code to insert above JS code as a <script>
into your page */
?>
希望尽管可能存在PHP错误，但我已经明确指出了这一点（因为我暂时没有使用PHP）。
您可以在here找到工作演示。