javascript - 将 Js 变量传递到数据表列

问题描述

我将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>

标签： javascriptphphtmlajaxdatatables

javascript - 将 Js 变量传递到数据表列

问题描述

解决方案

推荐阅读