У меня есть эти данные (по вертикали) в моей базе данных, которые классифицированы по столбцу 'P_CATEGORY' .

Мне удалось отобразить данные внутри каждого jQuery. Вот мой скрипт jQuery. Но как установить "p_date1 = value ['P_DATE']", специфичный для столбца P_CATEGORY = 'FERY1' внутри каждого?
file.js
<script>
$(document).ready(function(){
$.get("file.php")
.done(function (data) {
var displayString1 = "";
var displayString2 = "";
var displayString3 ="";
var displayString4 = "";
var p_date1, p_date2, p_date3, p_date4, p_date5 = "";
var sales1, sales2, sales3, sales4, sales5 = "";
var gross1, gross2, gross3, gross4, gross5 = "";
var nett1, nett2, nett3, nett4, nett5 = "";
$.each(JSON.parse(data), function (key, value) {
// FERY1
p_date1 = value['P_DATE']; // How to set this value for P_CATEGOR FERY1 ?
sales1 = value['P_SALES'];
gross1 = value['P_GROSS'];
nett1 = value['P_PROFIT'];
// FERY2
p_date2 = value['P_DATE']; // How to set this value for P_CATEGOR FERY2 ?
sales2 = value['P_SALES'];
gross2 = value['P_GROSS'];
nett2 = value['P_PROFIT'];
// FERY3
p_date3 = value['P_DATE']; // How to set this value for P_CATEGOR FERY3 ?
sales3 = value['P_SALES'];
gross3 = value['P_GROSS'];
nett3 = value['P_PROFIT'];
// CURY1
p_date4 = value['P_DATE'];
sales4 = value['P_SALES'];
gross4 = value['P_GROSS'];
nett4 = value['P_PROFIT'];
// CURY2
p_date5 = value['P_DATE'];
sales5 = value['P_SALES'];
gross5 = value['P_GROSS'];
nett5 = value['P_PROFIT'];
});
displayString1 +=
"<tr style='background-color:#eaeaea;'>" +
"<td>Date</td>" +
"<td>" + p_date1 + "</td>" +
"<td>" + p_date2 + "</td>" +
"<td>" + p_date3 + "</td>" +
"<td>" + p_date4 + "</td>" +
"<td>" + p_date5 + "</td>" +
"</tr>";
displayString2 +=
"<tr style='background-color:#eaeaea;'>" +
"<td>Date</td>" +
"<td>" + sales1 + "</td>" +
"<td>" + sales2 + "</td>" +
"<td>" + sales3 + "</td>" +
"<td>" + sales4 + "</td>" +
"<td>" + sales5 + "</td>" +
"</tr>";
displayString3 +=
"<tr style='background-color:#eaeaea;'>" +
"<td>Date</td>" +
"<td>" + gross1 + "</td>" +
"<td>" + gross2 + "</td>" +
"<td>" + gross3 + "</td>" +
"<td>" + gross4 + "</td>" +
"<td>" + gross5 + "</td>" +
"</tr>";
displayString4 +=
"<tr style='background-color:#eaeaea;'>" +
"<td>Date</td>" +
"<td>" + nett1 + "</td>" +
"<td>" + nett2 + "</td>" +
"<td>" + nett3 + "</td>" +
"<td>" + nett4 + "</td>" +
"<td>" + nett5 + "</td>" +
"</tr>";
$('#fTableBody1').css("display", "none");
$("#tableBody1").html(displayString1);
$('#fTableBody2').css("display", "none");
$("#tableBody2").html(displayString2);
$('#fTableBody3').css("display", "none");
$("#tableBody3").html(displayString3);
$('#fTableBody4').css("display", "none");
$("#tableBody4").html(displayString4);
$("#table-display").dataTable({
dom: 'Blfrtip',
scrollX: true,
"ordering": false,
buttons: [
'copy', 'csv', 'excel', 'pdf', 'print'
],
"lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]]
});
});
});
</script>
А вот мой php-файл для извлечения данных
file.php
<?php
require 'connection.php';
$query = "SELECT *
FROM TABLE ORDER BY ID ASC";
$result = oci_parse($conn, $query);
oci_execute($result);
$arr = array();
while ($row = oci_fetch_array($result)){
$arr[] = $row;
}
echo json_encode($arr);
?>
Потому что в моем HTML-файле мне нужно отобразить его в горизонтальном интерфейсе.
HTML-файл как предоставить:
html.html
<html>
<div class="row">
<!-- Table -->
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="x_panel">
<div class="x_title">
<h2>TABLE<small> </small></h2>
<ul class="nav navbar-right panel_toolbox">
<li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a></li>
</ul>
<div class="clearfix"></div>
</div>
<div class="x_content">
<form id='form-display' action="" method="POST">
<table id="table-display" class="table table-striped table-bordered" style="width:100%;">
<thead style="background-color:#598BAF; color:#ffffff;">
<tr>
<th>Subjet</th>
<th>FERY1</th>
<th>FERY2</th>
<th>FERY3</th>
<th>CURY1</th>
<th>CURY2</th>
</tr>
</thead>
<tbody id="tableBody1">
<div style="position:absolute;top:50%;left:42%;" id="fTableBody1">
<i class="fa fa-refresh fa-spin fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span>
</div>
</tbody>
<tbody id="tableBody2">
<div style="position:absolute;top:50%;left:42%;" id="fTableBody2">
<i class="fa fa-refresh fa-spin fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span>
</div>
</tbody>
<tbody id="tableBody3">
<div style="position:absolute;top:50%;left:42%;" id="fTableBody3">
<i class="fa fa-refresh fa-spin fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span>
</div>
</tbody>
<tbody id="tableBody4">
<div style="position:absolute;top:50%;left:42%;" id="fTableBody4">
<i class="fa fa-refresh fa-spin fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span>
</div>
</tbody>
</table>
</form>
</div>
</div>
</div>
<!-- Table -->
</div>
</html>
Благодарим вас за помощь в решении этой проблемы.
Спасибо.