Question

我得到了下面的代码，它们带有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

Answer 1

Ajax不是填充DataTable的强制性来源，它只是（广受青睐的）选项，可让您保持数据为最新状态而无需重新加载页面（例如，在编辑某些条目或删除它们时）。

您需要做的是一个PHP脚本，该脚本将响应简单的HTML页面，该页面具有<head>部分中引用的所有必要先决条件（包括jQuery和DataTables javascript和样式表），并且其中的空白<table id="mytable"></table>页面<body>。

除了上述先决条件外，您还需要在页面HTML中引用动态创建的javascript，该javascript使用对象数组（从SQL查询获得）作为父行和子行的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上找到演示。

具有非AJAX数据源的嵌套数据表

1 个答案: