2017-01-30 55 views
0

我有一個在下面的結構生成的HTML表:動態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()函數「工作」,如表中有箭頭旁邊的排序和搜索框和項目數顯示都在那裏,並完美工作,但分頁似乎並不工作雖然它確實出現了d顯示正確的頁數。目前,它表明[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的。

謝謝!

+0

有沒有涉及到產生的錯誤,現在包括在我的文章底部的數據表的誤差。我也可以做小提琴,但是我不能製作動態內容嗎?我不確定靜態內容是否可以正常工作,但是我爲這個站點使用的所有內容都是基於數據庫中的數據動態生成的。 – AndyPet74

+0

修復了所有控制檯錯誤,但仍然沒有收藏圖標和錯誤,這也是Bootstrap 4。 – AndyPet74

回答

0

做了一些改動,以我所包含文件,我用CDN的嘗試它和它的工作主要是除了一些造型,所以我下載了相同的文件CDN和jQuery的UI,並添加和似乎是工作。