将 Js 变量传递到数据表列答案

【问题标题】：Passing Js Variables into Datatables Columns将 Js 变量传递到数据表列
【发布时间】：2019-10-10 07:31:28
【问题描述】：

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

【问题讨论】：

您能否发布来自您的gateWay_LIVE_UPDATE.php 的响应（JSON）？
[{ "QUE": "0", "FAILED": "0", "TOTAL": "3", "STATE": "UNKNOWN" }, { "QUE": "0 ”，“失败”：“0”，“总计”：“1”，“状态”：“未知”}，{“QUE”：“0”，“失败”：“0”，“总计”：“12 ", "STATE": "UNKNOWN" }, { "QUE": "0", "FAILED": "0", "TOTAL": "0", "STATE": "UNKNOWN" }]

标签： javascript php html ajax datatables

【解决方案1】：

看看这个sn-p

$(document).ready(function() {
    $('#example').DataTable( {
        "ajax": {
            "url": "data/objects_root_array.txt",
            "dataSrc": ""
        },
        "columns": [
            { "data": "name" },
            { "data": "position" },
            { "data": "office" },
            { "data": "extn" },
            { "data": "start_date" },
            { "data": "salary" }
        ]
    } );
} );

来源：Flat array data source

【讨论】：

是的，就是这样，但重要的是当您将 php 数组转换为 json 文件时，您没有“数据”，因为您必须在转换时采用这种方式-> $ret = array( "数据" => 数组($array1, $array2, $array3, $array4) ); echo json_encode($ret);
一个小问题仍然存在，我想使用我的表标记作为标题但是当你将数据插入到列中时，它会引发错误，因为它会填满整个td 用他从 php 接收到的数据标记