В таблицах данных разные дочерние строки для каждой строки, данные из mysql и php / Динамически

я хочу сделать большую таблицу, в которой есть данные о пробном балансе, я хочу включить родителей учетной записи в первую очередь, чтобы показать в таблице, и когда я разверну первую строку, я хочу получить детей из этой строки (где id = 1 например), а затем, когда я разверну вторую строку, я хочу получить дочерние элементы этой 2-й строки (где id = 2, например, в моем запросе), чего я смог достичь, так это получить только те же самые дочерние элементы для первый запрос для всех строк, изображение:

введите описание изображения здесь

Когда я нажимаю «Учетные записи основных средств», я хочу получить другой список из другого запроса и т. Д., Также для дочерних строк, будут дочерние строки

текущий код:

    <html>
<head>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css
">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<style>
r.shown td.details-control {
background: url('../resources/details_close.png') no-repeat center center;
}

td.details-control {
background: url("https://datatables.net/examples/resources/details_open.png") no-repeat center center;
cursor: pointer;
}

tr.shown td.details-control {
background: url("https://datatables.net/examples/resources/details_close.png") no-repeat center center;
}

td.details-control1 {
background: url("https://datatables.net/examples/resources/details_open.png") no-repeat center center;
cursor: pointer;
}

tr.shown td.details-control1 {
background: url("https://datatables.net/examples/resources/details_close.png") no-repeat center center;
}
</style>
</head>

<?php
defined('DBPATH') OR exit('No direct script access allowed');
defined('CONTNAME') OR exit('No direct script access allowed');
defined('CONTMETHOD') OR exit('No direct script access allowed');
defined('CONTID') OR exit('No direct script access allowed');

$conn = new mysqli($servername, $username, $password, $dbname);

$sqlGetParents="SELECT * from account_Parent ";
$resultGetParents = $conn->query($sqlGetParents);



$sqlGetCatWithParent1="SELECT * from account_Category where parent_Id=1 ";
$resultGetCatWithParent1 = $conn->query($sqlGetCatWithParent1);

$sqlGetCatWithParent2="SELECT * from account_Category where parent_Id=2 ";
$resultGetCatWithParent2 = $conn->query($sqlGetCatWithParent2);


$sqlGetCategory="SELECT * from account_Category ";
$resultGetCategory = $conn->query($sqlGetCategory);

$sqlGetSubCategory="SELECT * from account_SubCategory ";
$resultGetSubCategory = $conn->query($sqlGetSubCategory);



?>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th></th>

<th>Title</th>
<th>Number</th>

</tr>
</thead>

<tbody>
<?php  while ($row = mysqli_fetch_array($resultGetParents))  {
echo " <tr>
<td class='details-control'></td>

<td>".$row[1]."</td>
<td>".$row[2]."</td>

</tr>";
}   ?>
<?php  while ($row1 = mysqli_fetch_array($resultGetCategory))  {
echo " <tr>
<td class='details-control'></td>

<td>".$row1[1]."</td>
<td>".$row1[2]."</td>

</tr>";
} ?>
<?php  while ($row2 = mysqli_fetch_array($resultGetSubCategory))  {
echo " <tr>
<td class='details-control'></td>

<td>".$row2[1]."</td>
<td>".$row2[2]."</td>

</tr>";
}
?>
<tr>
<td class="details-control"></td>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>

</tr>
</tbody>

<tfoot>
<tr>
<th></th>

<th>Title</th>
<th>Number</th>

</tr>
</tfoot>
</table>  </tr>
</tfoot>
</table>

<div id="test">
<table id='example1'>
<?php while ($row3 = mysqli_fetch_array($resultGetCatWithParent1)) {

echo " <tr>
<td class='details-control1'></td>

<td>".$row3[1]."</td>
<td>".$row3[2]."</td>

</tr>";

}

?>
</table>
</div>

<div id="test1">
<table id=''>
<?php while ($row4 = mysqli_fetch_array($resultGetCatWithParent2)) {

echo " <tr>
<td class='details-control2'></td>

<td>".$row4[1]."</td>
<td>".$row4[2]."</td>

</tr>";

}

?>
</table>
</div>


<?php




?>

<script>

$(document).ready(function() {
var table = $("#example").DataTable({

});

// Add event listener for opening and closing details
$("#example tbody").on("click", "td.details-control", function() {

var tr = $(this).closest("tr");
var row = table.row(tr);

if (row.child.isShown()) {
row.child.hide();
tr.removeClass("shown");
}
else {
row.child($("#test")).show();
tr.addClass("shown");

}
});

// Add event listener for opening and closing details
$("#example1 tbody").on("click", "td.details-control1", function() {
var tr = $(this).closest("tr");
var row = table.row(tr);

if (row.child.isShown()) {
row.child.hide();
tr.removeClass("shown");
}
else {
row.child($("#test1")).show();
tr.addClass("shown");
}
});
});
</script>

</html>

РЕДАКТИРОВАТЬ :

я смог добиться следующего:

введите описание изображения здесь

Моя проблема сейчас в том, что у меня есть много под-данных для каждой строки, в каждой строке есть много дочерних строк и т. Д. Какие-нибудь советы о том, как я могу добиться этого динамически?

0

Решение

Задача ещё не решена.

Другие решения

Других решений пока нет …

По вопросам рекламы ammmcru@yandex.ru
Adblock
detector