Я подключаюсь с помощью php к своему API, где я получаю свои данные, конвертируя их в json, передавая их в javascript, и затем я хочу использовать эти данные в своих столбцах в таблицах данных, но я не имею понятия также после прочтения многихтемы и документация, как это сделать, может кто-нибудь, пожалуйста, помогите мне, как это сделать?
function updateLiveGateWayAll_SQL_UPDATE(){
$.ajax({
url: 'gateWay_LIVE_UPDATE.php',
success: (data) => {
updateLiveGateWayAll_SQL_UPDATE_UNDER(data);
}
})
}
function updateLiveGateWayAll_SQL_UPDATE_UNDER(data){
var obj = JSON.parse(data);
var GATEWAY1_QUE = obj[0].QUE;
var GATEWAY1_FAILED = obj[0].FAILED;
var GATEWAY1_TOTAL = obj[0].TOTAL;
var GATEWAY1_STATE = obj[0].STATE;
var GATEWAY2_QUE = obj[1].QUE;
var GATEWAY2_FAILED = obj[1].FAILED;
var GATEWAY2_TOTAL = obj[1].TOTAL;
var GATEWAY2_STATE = obj[1].STATE;
var GATEWAY3_QUE = obj[2].QUE;
var GATEWAY3_FAILED = obj[2].FAILED;
var GATEWAY3_TOTAL = obj[2].TOTAL;
var GATEWAY3_STATE = obj[2].STATE;
var GATEWAY4_QUE = obj[3].QUE;
var GATEWAY4_FAILED = obj[3].FAILED;
var GATEWAY4_TOTAL = obj[3].TOTAL;
var GATEWAY4_STATE = obj[3].STATE;
}
function updateHistoryGateWayALL_SQL_INSERT(){
$.ajax({
url: 'gateWay_HISTORY_INSERT.php',
success: function (data) {
console.log(data);
}
});
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>GATEWAY - INFO - TABLE</title>
<!--Schritt_1: Link Style einbinden-->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<!--Mein eigenes CSS um DataTables CSS zu überschreiben-->
<link rel="stylesheet" type="text/css" href="style_Live_AND_History.css">
<!--Schritt_2: jQuery Google einbinden-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!--liveTimelinGateWayAll UND historyTimelineGateWayAll-->
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<!--Schritt_3: cdn dataTables einbinden-->
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<!--Schritt 4: Eigene JS einbinden (Optional)-->
<script src="dataTable.js"></script>
<!--historyTimelineGateWayAll-->
<script src="historyTimelineGateWayAll.js"></script>
<!--Schritt_5: jQuery einbinden-->
<script>
$(document).ready( function () {
$('#table_id').DataTable({
> I tried this way but it didnt work also
"processing": true,
"serverSide": true,
"ajax": "gateWay_LIVE_UPDATE.php",
"columns": [
{ "data": "QUE" },
{ "data": "FAILED" },
{ "data": "TOTAL" },
{ "data": "STATE" },
]
});
liveTimelineGateWayAll()
historyTimelineGateWayAll()
updateLiveGateWayAll_SQL_UPDATE()
updateHistoryGateWayALL_SQL_INSERT()
} );
</script>
<body>
<h1 style="text-align: center">GATEWAY INFO TABLE</h1>
<table id="table_id" class="display">
<thead>
<tr>
<th class="getWayUpperPoint">GATEWAY</th>
<th>QUE <br>(in Warteschlange)</th>
<th>FAILED <br>(versenden Fehlgeschlagen Gesamt)</th>
<th>TOTAL <br>(versendet Gesamt)</th>
<th>STATE <br>(Status)</th>
</tr>
</thead>
<tbody>
<tr>
<td class="gateWayUnderPoint">GATEWAY1</td>
<td id="GTW_195_QUE"></td>
<td id="GTW_195_FAILED"></td>
<td id="GTW_195_TOTAL"></td>
<td id="GTW_195_STATE"></td>
</tr>
<tr>
<td class="gateWayUnderPoint">GATEWAY2</td>
<td id="GTW_196_QUE"></td>
<td id="GTW_196_FAILED"></td>
<td id="GTW_196_TOTAL"></td>
<td id="GTW_196_STATE"></td>
</tr>
<tr>
<td class="gateWayUnderPoint">GATEWAY3</td>
<td id="GTW_197_QUE"></td>
<td id="GTW_197_FAILED"></td>
<td id="GTW_197_TOTAL"></td>
<td id="GTW_197_STATE"></td>
</tr>
<tr>
<td class="gateWayUnderPoint">GATEWAY4</td>
<td id="GTW_198_QUE"></td>
<td id="GTW_198_FAILED"></td>
<td id="GTW_198_TOTAL"></td>
<td id="GTW_198_STATE"></td>
</tr>
</table>
<!--liveTimelineGateWayAll UND historyTimelineGateWayAll-->
<div class="hauptContainer">
<div id="unterContainer1">
<br><br><br><br><br>
<canvas id="myChartLive"></canvas>
</div>
<div id="unterContainer2">
<br><br><br>
<select class="selectContainer" id="select">
<option class="styleSelect" value="none"></option>
<option class="styleSelect" value="hours" selected >24 Stunden Verlauf</option>
<option class="styleSelect" value="day">Wochenverlauf</option>
<option class="styleSelect" value="week">Monatsverlauf</option>
</select>
<button class="selectContainer" type="button" onclick="historyTimelineGateWayAll()">Confirm</button>
<canvas id="myChartHistory"></canvas>
</div>
</div>
<!--liveTimelineGateWayAll UND historyTimelineGateWayAll-->
<script src="http://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js" ></script>
<!--historyTimelineGateWayAll-->
<script src="historyTimelineGateWayAll.js"></script>
<script src="liveTimelineGateWayAll.js"></script>
<script>
</script>
</body>
</html>