Question

我有一个从datatables.net调用分页的javascript我尝试在一个完整的html文件中运行，它就像一个魅力。试用代码如下

<!DOCTYPE html>
<html>
    <head>
        <link href="//datatables.net/download/build/nightly/jquery.dataTables.css" rel="stylesheet" type="text/css" />

        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script src="//datatables.net/download/build/nightly/jquery.dataTables.js"></script>
        <script type="text/javascript">
    $(document).ready( function () {
    var table = $('#example').DataTable();
} );
</script>
<style type="text/css">
table{
    border-collapse: collapse;
}
th {
        font-size:13px;
    border-width: 2px;
    padding: 8px;
    border-style: solid;
    border-color: #000000;
    background-color: #E6E6FF;
}
td {
    border-width: 2px;
    padding: 8px;
    border-style: solid;
    border-color: #000000;
    background-color: #E0F0FF;
}
</style>
    </head>
    <body>

            <table id="example" class="display" width="100%">

                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Position</th>
                        <th>Office</th>
                        <th>Age</th>
                        <th>Start date</th>
                        <th>Salary</th>
                    </tr>
                </thead>


            </table>

    </body>
</html>

但是当我尝试在php环境中运行它时，脚本的分页没有出现。是什么导致它不起作用？因为我在php代码中有sql查询。我将查询打印到html表中。所以它应该像试用代码一样工作吗？ php代码的一些摘录如下：

<!DOCTYPE html>
<html>
    <head>
        <link href="//datatables.net/download/build/nightly/jquery.dataTables.css" rel="stylesheet" type="text/css" />

        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script src="//datatables.net/download/build/nightly/jquery.dataTables.js"></script>
        <script type="text/javascript">
    $(document).ready( function () {
    var table = $('#example').DataTable();
} );
</script>
<style type="text/css">
table{
    border-collapse: collapse;
}
th {
        font-size:13px;
    border-width: 2px;
    padding: 8px;
    border-style: solid;
    border-color: #000000;
    background-color: #E6E6FF;
}
td {
    border-width: 2px;
    padding: 8px;
    border-style: solid;
    border-color: #000000;
    background-color: #E0F0FF;
}
</style>
    </head>

<body>

<?php

echo "<table id='example' class='display' width='100%'>

<tr>
<th>Nama Badan</th>
<th>Negeri</th>
<th>Jenis Sukan</th>
<th>Kategori</th>
<th>Status</th>
</tr>";

while($row = mysqli_fetch_array($query)){
    echo "<tr>";
echo "<td>". $row['NamaBadan'] ."</td>";
echo "<td>". $row['STATE_NAME'] ."</td>";
echo "<td>". $row['JenisSukan'] ."</td>";
echo "<td>". $row['KategoriSukantext'] ."</td>";
echo "<td>". $row['Status'] ."</td>";
echo "</tr>";
}
echo "</table>";

mysqli_close($con);
?>

</body>
</html>

Answer 1

您应该在第一个<thead>周围使用<tr>标记，让Datatables加载其对象。

Answer 2

将其更改为：

echo "<table id='example' class='display' width='100%'>

<thead>
<tr>
<th>Nama Badan</th>
<th>Negeri</th>
<th>Jenis Sukan</th>
<th>Kategori</th>
<th>Status</th>
</tr>
</thead>";

Answer 3

该代码可能无效，因为这种回声不起作用：

echo "<table id='example' class='display' width='100%'>";

你用'而不是'来编写html属性。试试这个：

echo '<table id="example" class="display" width="100%">';

3 个答案: