javascript - 在表中显示 JQuery 的结果

Question

我希望 jquery 的结果显示在另一个文件中的表中。

我尝试更改表的 id，但我的表来自 bootstrap，所以

CSS 如果我改变 id 就会改变。 我不知道还能做什么。

这些是我的文件

配置.php

<?php
    $servername = "localhost";
$username = "root";
$password = "";
$db = "stock-stock-stock";

// Create connection
$conn = mysqli_connect($servername, $username, $password, $db );

// Check connection
if (!$conn) {
    die("Connection failed: " . mysqli_connect_error());
}
?>

read_students.php

include_once('../config.php');
$sql = "SELECT * FROM games WHERE status='available'";
$query = $conn->query($sql);

$result = array("data" => array());

while($data = $query->fetch_assoc()){
    $checkbox = '<input type="checkbox" class="checkbox" id="checkbox_' . $data['id'] . '" 
value="' . $data['id'] . '" name="groupCheckBox" onchange="enableDeleteAllButton(this)">';
    $image = '<img width="100" height="100" class="" src="' . $data['game_pic'] . '">';
    $buttons = '<a href="game-update.php?$id='. $data['id'] . '" class="btn btn-info btn-sm">
<i class="fa fa-edit" aria-hidden="true"></i></a><a onclick="removeGame(' . $data['id'] . ')" class="btn btn-danger btn-sm"><i class="fa fa-trash" aria-hidden="true"></i></a>';
    // need "data" string
    $result["data"][] = array(
        $checkbox,
        $data['id'],
        $data['game_name'],
        $data['players'],
        $data['game_descrip'],
        $image,
        $data['status'],
        $buttons,
    );
}
echo json_encode($result);

?>

这是我想要在其中显示结果的表格。

list_students.php

<table class="table table-bordered" id="myTables" width="100%" cellspacing="0">
                <thead>
                    <tr align="center">
                        <th></th>
                        <th>Game ID</th>
                        <th>Game Name</th>
                        <th>Category</th>
                        <th>Description</th>
                        <th>Photo</th>
                        <th>Availability</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </div>
        </div>
        <tbody>
        </tbody>
    </table>

这是我的脚本，与我的表位于同一文件中

 $(document).ready(function() {
        var gameTable = $("#myTables").DataTable({
            "ajax": "jquery/read_students.php",
            "order": [1, 'desc'],
            "aoColumnDefs": [{
                "bSortable": false,
                "aTargets": [ 0,1,2,3,4,5,6],

            },{
                "targets": [1],
                "visible": false,
                "searchable": true,
            }]
        });
    });

Answer 1

根据我对你的代码的理解，你的PHP代码返回这样的数据。

<?php
    $result["data"][] = array(
        'checkbox 1',
        'id 1',
        'game_name 1',
        'players 1',
        'game_descrip 1',
        'image 1' ,
        'status 1',
        'buttons 1'
    );
    $result["data"][] = array(
        'checkbox 2',
        'id 2',
        'game_name 2',
        'players 2',
        'game_descrip 2',
        'image 2' ,
        'status 2',
        'buttons 2'
    );

    echo json_encode($result); // returns data to ajax call
?>

我看到的问题也存在于您的ajax调用、格式中，请尝试按以下方式更改它。

$(文档).ready(函数() { $.ajax({ 类型:“帖子”， url: 'read_students.php', 成功:功能(响应) { var jsonData = 响应； 控制台.log(jsonData); //该数据将如下所示。 //{"data":[["checkbox 1","id 1","game_name 1","players 1","game_descrip 1","image 1","status 1","buttons 1"], ["checkbox 2","id 2","game_name 2","players 2","game_descrip 2","image 2","status 2","buttons 2"]]} } }); });

收到 ajax 调用的响应后，现在让我们处理您的数据。

var jsonData = {"data":[["checkbox 1","id 1","game_name 1","players 1","game_descrip 1","image 1","status 1","buttons 1"],["checkbox 2","id 2","game_name 2","players 2","game_descrip 2","image 2","status 2","buttons 2"]]}

jsonData.data.forEach(function(v, i){
	var tbody = $("#myTables").find('tbody'); debugger;
  tbody.append("<tr><td>"+v[0]+"</td><td>"+v[1]+"</td><td>"+v[2]+"</td><td>"+v[3]+"</td><td>"+v[4]+"</td><td>"+v[5]+"</td><td>"+v[6]+"</td></tr>")
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<table class="table table-bordered" id="myTables" width="100%" cellspacing="0">
  <thead>
    <tr align="center">
      <th>Game ID</th>
      <th>Game Name</th>
      <th>Category</th>
      <th>Description</th>
      <th>Photo</th>
      <th>Availability</th>
      <th>Action</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>