在 table 中附加 Jquery Ajax "data" 作为单独的值

Question

我有一个 table 如下数据table table :

            <button id="addRow">Add New Row</button><br>
                <table class="table table-striped table-bordered table-hover "  id="example" cellSpacing=0 width="100%">
                    <thead>
                        <tr>
                            <th>1</th>
                            <th>2</th>
                            <th>3</th>
                            <th>4</th>
                            <th>5</th>
                        </tr>
                    </thead>
                    <tr style="text-align: center;">
                        <td>hola</td>
                        <td>ciao</td>
                        <td>bonjour</td>
                        <td>yo</td>
                        <td>salut</td>
                    </tr>
                </table>

我想使用 javascript 脚本追加元素，如下所示：

<script type="text/javascript">
                        $(document).ready(function () {
                            debugger;
                            var t = $('#example').DataTable({ "searching": true, "paging": true });
                        var counter = 1;
                        $('#addRow').on('click', function ciicici() {

                        var now = new Date();
                        var now = now.toMysqlFormat();
                        var tii = new Date();
                        tii.setSeconds(tii.getSeconds() - 50000);
                        var tii = tii.toMysqlFormat();
                        $.post( "sqlmachine_test_ajax.php", {  timing: now,seconding: tii  })
                        .done(function( data ) {
                                t.row.add([
                                counter +'.1',
                                counter +'.2',
                                counter +'.3',
                                counter +'.4',
                                counter +'.5'
                                ]).draw();
                                counter++;
                            // });  
                            //setTimeout(function(){ciicici();}, 5000);
                        }); // Automatically add a first row of data
                        $('#addRow').click();
                    });
                </script>

这两个工作正常，唯一的问题是我想通过 Jquery AJAX 脚本检索要附加的元素。

假设我有一个 php 页面发回 5 个值，我想将其添加到每一列（而不是 counter1、counter2 等...），如下所示：

<?php
echo 'counter1, counter2, counter3, counter4, counter5';
?>

在 javascript 中，我想简单地说：

...
.done(function( data ) {
                                    t.row.add([
                                    data //(instead of the counters)
                                    ]).draw();
                                    counter++;
...

我试过这个，还有数组和 json 编码数组，但我得到的只是 table 的第一个单元格中的 5 个结果。那么我如何将 ajax php 响应附加到 table 作为 table 不同单元格中的数据？

马可

Answer 1

当您从通话中取回数据时，您必须使用 .split() 进行分离。

所以您可以在收到回电时执行此操作

.done(function( data ) {
    var splitData = data.split(", ") //Split your data with the comma and space
    $.each(splitData, function(e){  //For each piece of data
        //Add your rows here one by one
        t.row.add([
            splitData[e] //Make sure the 'e' in the function and here are the same
        ]).draw();
    })
    counter++;
});

这是一个松散的答案，我会尽快添加更多内容。

编辑：更多信息

我通常做的是用分隔符回显所有内容。所以，在你的情况下，我会回应 1, 2, 3, 4, 5:A, B, C, D, E。因此，当数据 returns 时，这就是您所看到的。

在你的数据成功中，你会做类似

的事情

var dataParts = data.split(":") //This splits your data into the 2 parts using the : separator
var dataPart1 = dataParts[0] //This will get 1, 2, 3, 4, 5
var dataPart2 = dataParts[1] //this will get A, B, C, D, E

然后从那里开始，您使用逗号分隔。

var dataPieces1 = dataPart1.split(', ');
var dataPieces2 = dataPart2.split(', ');

然后运行循环。（使用 javascript 的 for 循环通常比使用 jQuery 的 .each() 更好）

for(var i = 0; i < dataPieces1.length; i++){ //Start your for loop on the first part
    //Create a row here using dataPieces1[i], this will loop and make a new
    //row every time the next loop finishes
    for(var j = 0; j < dataPieces2.length; j++){ //Start the second loop
        //Not sure how you would want to do this, but here's some example code
        //Since you're inside a row now, append your dataPieces2[j] to that row
        //This will loop for every dataPieces2 and append each one as a column
        //in that single row.
    } 
}

在 table 中附加 Jquery Ajax "data" 作为单独的值

Append Jquery Ajax "data" as separate values in a table

php

ajax

jquery

append

datatables