在表格中显示 JQuery 的结果

Question

I want the result of my jquery to show in the table i have in another file.

I've tried changing the id of the table but my table is from bootstrap so

the css changes if I change the id. I don't know what else to do.

These are my files

config.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);

?>

this is my table where I want the result to be displayed in.

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>

this is my script in the same file as my 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

According to my understanding of your code, your PHP code is returning data like this.

<?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
?>

The issue I see is also in your ajax call, format, please try to change it like following.

$(document).ready(function() { $.ajax({ type: "POST", url: 'read_students.php', success: function(response) { var jsonData = response; console.log(jsonData); // this data will look this. //{"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"]]} } }); });

Once you get response from ajax call, now let's process your data.

 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>