Вложенные DataTables с источником данных не AJAX - PullRequest
Новая
       1

Вложенные DataTables с источником данных не AJAX

0 голосов
/ 27 февраля 2019

Я получил следующий код с загрузкой, но мне нужна опция сортировки.Из-за этой проблемы я хотел бы решить мою проблему с DataTables.Есть ли возможность решить мою проблему без использования ajax?Я хочу заполнить родительскую таблицу и дочерний SQL-запрос. Как в этом примере 

<?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>";
}

?>

С результатом: Результат

1 Ответ

0 голосов
/ 27 февраля 2019

Ajax не является обязательным источником для заполнения вашей DataTable, это всего лишь (широко предпочтительный) вариант, который позволяет вам обновлять данные без перезагрузки страницы (например, после редактирования определенных записей или их удаления).

Что вам нужно сделать, так это PHP-скрипт, который будет отображать простую HTML-страницу со всеми необходимыми предпосылками (включая jQuery и JavaScript-таблицы данных и таблицы стилей), указанную в разделе <head> и пустую <table id="mytable"></table> на странице <body>.

В дополнение к вышеперечисленным предварительным условиям вам необходимо сослаться на своей странице HTML на динамически создаваемый 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).

Вы можете найти работающую demo более здесь .

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...