Question

我试图将php数组传递给JQuery，并将一个JQuery数组设置为php数组，以用作我的JQuery DataTable的源。

一切似乎都运行良好，但是当页面呈现时，我只会显示标题行。为什么我的数据表没有显示？

我应该进行哪些更改，以便DataTable正确显示和呈现？

编辑
我认为我看到了问题的一部分，当我查看页面源代码时，它显示以下内容，其中注释了所有PHP EXCEPT 正在屏幕上编写的PHP。

<?php

$con = mysqli_connect("localhost", "root", "", "demo_db");
if (mysqli_connect_errno())
{
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
$sql="SELECT * FROM demo_table LIMIT 10";
$result = mysqli_query($con,$sql);
 while($row = $result->fetch_array(MYSQLI_ASSOC)) {
    $data[] = $row;
}
mysqli_free_result($result);
mysqli_close($con);
?>

<html>
<body>
    <div class="container">
        <table id="my-table" class="table table-striped table-bordered" style="width:100%">
            <thead>
                <tr>
                    <th>id</th>
                    <th>Name</th>
                    <th>NumOfSales</th>
                    <th>SalesCurrent</th>
                    <th>Sales30Days</th>
                    <th>Sales60Days</th>
                    <th>Sales90Days</th>
                    <th>Sales120Days</th>
                    <th>TotalSales</th>
                    <th>ErrorDollarAmount</th>
                </tr>
            </thead>
        </table>
    </div> 
</body>

<script type="text/javascript">
var information = <?php echo json_encode($data); ?>;
    $(document).ready(function () {
        $('#my-table').dataTable({
             data: information,
            columns: [
                { title: 'id' },
                { title: 'Name' },
                { title: 'NumOfSales' },
                { title: 'SalesCurrent' },
                { title: 'Sales30Days' },
                { title: 'Sales60Days' },
                { title: 'Sales90Days' },
                { title: 'Sales120Days' },
                { title: 'TotalSales' },
                { title: 'ErrorDollarAmount' }
            ]
        });
    });
</script>

</html>

Answer 1

这是使用php json_encode（）方法将数据对象传递到数据表的工作示例

即使您缺少数据表的 tbody 标签

http://phpfiddle.org/main/code/izyq-3a7y

<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href=" https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css">


<!-- jQuery -->
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script>

<!-- DataTables -->
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<?php

$data = array(
    array('id'=>'parvez', 'Name'=>11, 'NumOfSales'=>101),
    array('id'=>'alam', 'Name'=>1, 'NumOfSales'=>102),
    array('id'=>'phpflow', 'Name'=>21, 'NumOfSales'=>103)       
    );

?>
<html>
<body>
    <div class="container">
        <table id="my-table" class="table table-striped table-bordered" style="width:100%">
            <thead>
                <tr>
                    <th>id</th>
                    <th>Name</th>
                    <th>NumOfSales</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div> 
</body>

<script type="text/javascript">
var information = <?php echo json_encode($data)  ?>;
    $(document).ready(function () {
console.log(information)

        $('#my-table').dataTable({
            data: information,
            columns: [
                { data: 'id' },
                { data: 'Name' },
                { data: 'NumOfSales' },

            ]
        });
    });
</script>

</html>

您当前代码中的更改应如下所示：

<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href=" https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css">


<!-- jQuery -->
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script>

<!-- DataTables -->
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<?php

$con = mysqli_connect("localhost", "root", "", "demo_db");
if (mysqli_connect_errno())
{
    echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
$sql="SELECT * FROM demo_table LIMIT 10";
$result = mysqli_query($con,$sql);
 while($row = $result->fetch_array(MYSQLI_ASSOC)) {
    $data[] = $row;
}
mysqli_free_result($result);
mysqli_close($con);

?>
<html>
<body>
    <div class="container">
        <table id="my-table" class="table table-striped table-bordered" style="width:100%">
            <thead>
                <tr>
                    <th>id</th>
                    <th>Name</th>
                    <th>NumOfSales</th>
                    <th>SalesCurrent</th>
                    <th>Sales30Days</th>
                    <th>Sales60Days</th>
                    <th>Sales90Days</th>
                    <th>Sales120Days</th>
                    <th>TotalSales</th>
                    <th>ErrorDollarAmount</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div> 
</body>

<script type="text/javascript">
var information = <?php echo json_encode($data)  ?>;
    $(document).ready(function () {
        $('#my-table').dataTable({
            data: information,
            columns: [
                { data: 'id' },
                { data: 'Name' },
                { data: 'NumOfSales' },
                { data: 'SalesCurrent' },
                { data: 'Sales30Days' },
                { data: 'Sales60Days' },
                { data: 'Sales90Days' },
                { data: 'Sales120Days' },
                { data: 'TotalSales' },
                { data: 'ErrorDollarAmount' }
            ]
        });
    });
</script>

</html>

页面仅呈现DataTable标头而不提供信息

1 个答案: