Dynamic HTML Table With DataTable not paginating

257
January 31, 2017, at 01:13 AM

I have an html table that is generated in the following structure:

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>";

The table loads fine and the javascript to insert it into the document looks like:

$(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,
        });
    });
});

The table itself loads fine and the .DataTable() function "works" as in the table has the arrows next to it for sorting and the search box and number of items display are all there and work perfectly but the pagination does not seem to work although it does appear and show the right number of pages. Currently it shows [1][2][3][4][5][...][307] so it does have the right amount of pages but I can't click on any of the numbers to go to that page. Below is the full page that calls the generation code as well as has all the file calls in the head.

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

Any ideas why it is not working? 90% of DataTables is working but pagination is not working and that appears the be the only part that is not working.

Thanks!

READ ALSO
infinite scroll with loading data through ajax

infinite scroll with loading data through ajax

I have a bug and I don't know how to fix that I have an infinte scroll which is loading some pics and when I click on a pics it is show me the pics in popup but sometimes it does not and I don't know why

248
Order dropdown item by text

Order dropdown item by text

I need to order this select to alphabetical ( Already work ) and to the number of names

205
jquery append and not being able to click the appended class

jquery append and not being able to click the appended class

I have a div which when click a new div is appened - when this new div is shown and wants to be closed by clicking on it, it does fire

281
Add url to a script code [on hold]

Add url to a script code [on hold]

I am having a script running in my siteUpon clicking on the menu hamburger, you can see some other menu items come out from this

248