我在数据库中具有这些数据(垂直),这些数据是根据列'P_CATEGORY'进行分类的。
我设法在每个jQuery中显示数据。这是我的jQuery脚本。但是,如何在每个列中设置特定于列P_CATEGORY ='FERY1'的“ p_date1 = value ['P_DATE']”呢?
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文件中,我需要在horizontal界面中显示它。
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>
感谢有人可以帮助我解决此问题。
谢谢。
我没有100%回答您的问题,但如果您这样做,则使用javascript
value.p_date = "date";
将在对象值内部创建一个新属性,如果不存在,它将对其进行更改-显然-因此,这是一个示例,其中包含一个随机布尔json对象,该布尔对象名为如果为真,则完成;如果没有,我将为值添加新的属性...!
$(document).ready(function () {
jQuery.get("https://jsonplaceholder.typicode.com/todos/")
.done(function (data) {
$.each(data, function (key, value) {
if (value['completed']) {
value.p_date = new Date();
}
});
$.each(data, function (key, value) { //for testing only
if (value['completed']) {
value.p_date = new Date();
}
console.log(key);
console.log(value);
});
});
});