如何使用ajax和php填充表格并在表格行中添加按钮？

Question

我正在尝试从数据库中读取信息，并将其放在表中，并且还在每行的最后一列中包含按钮。 除了添加按钮之外，我还无法使其正常工作。

这是我的retrieve.php

 <?php 

require_once 'connect.php';


 $output = array('data' => array());
 $sql = "SELECT * FROM student_acc";
$query = $connect->query($sql);

$x = 1;
while ($row = $query->fetch_assoc()) {

    $actionButton = '<a href="#" class="view" title="View" data-toggle="tooltip" onclick="viewAd('[ad_id]')"><i class="material-icons">&#xE417;</i></a>' +
'<a href="#" class="edit" title="Edit" data-toggle="tooltip" onclick="editAd('[ad_id]')"><i class="material-icons">&#xE254;</i></a>' +
'<a href="#" class="delete" title="Delete" data-toggle="tooltip" onclick="deleteAd('[ad_id]')"><i class="material-icons">&#xE872;</i></a>'
 ; // buttions I'd like to include


    $output['data'][] = array(
        $x,
        $row['address'],
        $row['single_unit'],
        $row['single_rent'],
        $row['sharing_unit'],
        $row['sharing_rent'],
        $row['date'],
        $actionButton; //I'm not sure how to include this
    );

    $x++;
} 
$connect->close();

echo json_encode($output);

我的ajax.js

    $(document).ready(function(){               
            $.ajax({
            type: "POST",
            dataType: "json",
            url: "tableretrieve/retrievestudent.php",
            data: {action: "load"},
            success: function (response){
                console.log(response);
                $.each(response, function(index, obj) {
                var row = $('<tr>');
                row.append('<td>' + obj.address + '</td>');
                row.append('<td>' + obj.single_unit + '</td>');
                row.append('<td>' + obj.single_rent + '</td>');
                row.append('<td>' + obj.sharing_unit + '</td>');
                row.append('<td>' + obj.sharing_rent + '</td>');
                row.append('<td>' + obj.date + '</td>');
                row.append('<td>' + *Code to include buttions here* + '</td>');

                $('table').append(row)
                });
                }
            });

    });

我用下面的代码做了一些测试，它很好地附加了：

    $(document).ready(function(){

        var ActionButions ='<a href="#" class="view" title="View" data-toggle="tooltip"><i class="material-icons">&#xE417;</i></a>' +
                '<a href="#" class="edit" title="Edit" data-toggle="tooltip"><i class="material-icons">&#xE254;</i></a>' +
                '<a href="#" class="delete" title="Delete" data-toggle="tooltip"><i class="material-icons">&#xE872;</i></a>';

                 var row = $('<tr>');
                row.append('<td>' + "Vanderbijlpark, Bowker str, CE4, 12" + '</td>');
                row.append('<td>' + "3" + '</td>');
                row.append('<td>' + "1500" + '</td>');
                row.append('<td>' + "1" + '</td>');
                row.append('<td>' + "2500" + '</td>');
                row.append('<td>' + "2019/08/14" + '</td>');
                row.append('<td>' + ActionButions + '</td>');

                $('table').append(row); 

});  

我正在尝试通过从数据库中读取值来复制上面的代码。

Answer 1

1. 该字符串应与串联。 （点），而不是PHP脚本中的+（加号）。 这里的[ad_id]是什么？ 如果它是数据库表的id列，请使用.$row['ad_id']. 。

    $actionButton = '<a href="#" class="view" title="View" data-toggle="tooltip" onclick="viewAd('.$row['ad_id'].')"><i class="material-icons">&#xE417;</i></a>' . '<a href="#" class="edit" title="Edit" data-toggle="tooltip" onclick="editAd('.$row['ad_id'].')"><i class="material-icons">&#xE254;</i></a>' . '<a href="#" class="delete" title="Delete" data-toggle="tooltip" onclick="deleteAd('.$row['ad_id'].')"><i class="material-icons">&#xE872;</i> </a>' ; 

2. 您可以尝试使用键和值的关联数组，如下所示：

    $output['data'][] = array( $x, $row['address'], $row['single_unit'], $row['single_rent'], $row['sharing_unit'], $row['sharing_rent'], $row['date'], 'buttons' => $actionButton // no colon here ); 

3. 并尝试row.append('<td>' + obj.buttons + '</td>');

使用可帮助您修复语法错误的代码编辑器。 另外，使用浏览器开发人员工具（在Windows上为F12 ，在Mac上为cmd + option + i ）来查找JavaScript错误。

Answer 2

我设法解决了我的问题，我必须在index.php包含一个数据表javascript

<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>

我的retrieve.php

include 'connect.php'

 $sql = "SELECT * FROM student_acc";
$query = $connect->query($sql);

$x = 1;
while ($row = $query->fetch_assoc()) {
  $actionButton = '<a href="#" class="view" title="View" data-toggle="tooltip" onclick="viewAd('.$row['ad_id'].')"><i class="material-icons">&#xE417;</i></a>
  <a href="#" class="edit" title="Edit" data-toggle="tooltip" onclick="editAd('.$row['ad_id'].')"><i class="material-icons">&#xE254;</i></a> 
  <a href="#" class="delete" title="Delete" data-toggle="tooltip" onclick="deleteAd('.$row['ad_id'].')"><i class="material-icons">&#xE872;</i></a>';

  $data['data'][] = array(
        $row['address'],
        $row['single_unit'],
        $row['single_rent'],
        $row['sharing_unit'],
        $row['sharing_rent'],
        $row['date'],
        $actionButton);
}


echo json_encode($data);

回到表所在的index.php页面，我必须添加此脚本

 $(document).ready(function(){

        Table = $("#studentAccomodationTable").DataTable({
            "ajax": "tableretrieve/retrieve.php"
        });

就是这样。

感谢https://datatables.net