带有 DataTable 的动态 HTML 表不分页答案

【问题标题】：Dynamic HTML Table With DataTable not paginating带有 DataTable 的动态 HTML 表不分页
【发布时间】：2017-01-30 19:16:38
【问题描述】：

我有一个按以下结构生成的 html 表：

echo "<table class='table table-striped table-inverse table-bordered table-hover' id='LeaderBoardTable' table_Dynamic >";
echo "<thead>";
echo "<tr>";
echo "<th></th>";
echo "<th>Username</th>";
echo "<th>SteamID</th>";
echo "<th>Score</th>";
echo "<th>K/D</th>";
//echo "<th>Search</th>"; //Do later
echo "</tr>";
echo "</thead>";
echo "<tbody id='leaderboardTable' class='leaderboardTable'>";
foreach ($items as $item){
    $player = new Player($item['steam'], $dbh);
    echo "<tr>";
    echo "<td><i class='fa fa-crosshairs' aria-hidden='true'></i></td>";
    echo "<td>" . $player->get("name") . "</td>";
    echo "<td>" . $player->get("steam") . "</td>";
    echo "<td>" . $player->get("score") . "</td>";
    echo "<td>" . getKD($player) . "</td>";
    echo "</tr>";
} 
echo "</tbody>\n</table>";

表格加载正常，将其插入文档的 javascript 如下所示：

$(document).ready(function() {
    $.ajax({
        type: 'post',
        url: 'control/leaderboard/leaderboardGrab.php',
        data: 'null=null',
    }).done(function(d){
        $('#loadArea').html(d);
        $('#LeaderBoardTable').DataTable({
            "order": [[3, "desc"]],
            "bPaginate": true,
        });
    });

});

表格本身加载良好，.DataTable() 函数“工作”，因为表格旁边有箭头用于排序，搜索框和显示的项目数都在那里并且工作正常，但分页似乎没有工作，虽然它确实出现并显示正确的页数。目前它显示 [1][2][3][4][5][...][307] 所以它确实有正确数量的页面，但我不能点击任何数字去那个页。下面是调用生成代码以及所有文件调用的完整页面。

<html>
<head>
    <title> <?php echo $webTitle; ?> </title>
    <?php $page = "leaderboards" //setting page for include ?>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Calling JS -->
    <!-- Latest compiled and minified Jquery JavaScript -->
    <script src="js/jquery.min.js"></script>
    <script src="js/DataTable/jqueryDataTables.js"></script>
    <script src="js/DataTable/dataTables.bootstrap4.min.js"></script>
    <script src="js/bootstrap/bootstrap.min.js"></script>
    <script src="js/leaderboard/leaderboardFunctions.js"></script>
    <!-- Bootstrap 4 and Tether -->
    <script src="js/tether/tether.min.js"></script>

    <!-- Custom JS -->
    <script src="js/Navjs.js"></script>
    <script src="js/paging.js"></script>

    <!-- End Of JS -->

    <!-- Bootstrap 4, Tether, Fontawesome -->
    <link rel="stylesheet" href="css/DataTable/dataTables.bootstrap4.css">
    <link rel="stylesheet" href="css/tether/tether.min.css">
    <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css">
    <link rel="stylesheet" href="css/fontawesome/font-awesome.min.css">
    <link rel="stylesheet" href="css/social.css">
    <!-- Custom CSS --> 
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<?php include_once "views/social.php" ?>
<div class="container" style="width:95%;">
    <div class="row">
        <div class="wrapper">
            <?php include_once "views/nav/index.php" ?>

            <?php include_once "views/$page/index.php" ?>
        </div>
    </div>
</div>

</body>
</html>

任何想法为什么它不起作用？ 90% 的 DataTables 可以工作，但分页不工作，这似乎是唯一不工作的部分。

只有我得到的控制台错误是缺少 Favicon.ico。

谢谢！

【问题讨论】：

没有与 DataTables 相关的错误，产生的错误现在包含在我的帖子底部。我也可以制作小提琴，但我不能制作动态内容，可以吗？我不确定静态内容是否有效，但我用于此站点的所有内容都是根据数据库中的数据动态生成的。
修复了所有控制台错误，但缺少 favicon 和错误仍然发生，这也是 Bootstrap 4。

标签： javascript php jquery pagination datatables

【解决方案1】：

对我包含的文件进行了一些更改，我尝试使用 CDN，它主要工作除了一些样式，所以我下载了与 CDN 和 jquery-ui 相同的文件并添加并似乎可以工作。

【讨论】：