Search code examples
phpjsontwitter-bootstraphtml-tablebootstrap-table

Bootstrap table showing JSON data

I'm running Bootstrap on my site, combined with a bootstrap plugin called Bootstrap Tables. It requests the data to be delivered as a JSON file.

I'm having trouble however getting it to work. I've been trying for a full day now, but to no result. I also tried Google and other code examples.

My JSON file looks like

    {"giveawayid":"101", "creatorid":"7962290569"}

My test page looks like:

<html lang="en"> 
<head>
    <!-- Latest compiled and minified JavaScript -->
    <script src="js/jquery-1.11.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/bootstrap-table.js"></script>
    <!-- Bootstrap - Latest compiled and minified CSS -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/bootstrap-table.css">

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Test</title>
</head>

<body>
<p>&nbsp;</p>
<div class="container">

    <!-- table -->
    <table class='table' data-toggle="table" data-url="test.json">
    <thead>
    <TR>
        <TH data-field="giveawayid" data-align="center" data-sortable="true">giveawayid</TH>
        <TH data-field="creatorid" data-align="center" data-sortable="true">creatorid</TH>
    </TR>
    </thead>
    </table>

</div>
</body></html>

Now as you can see by the sortable headers, the Bootstrap Table javascript is active.

I also checked the JSON files and although I made them myself, they seem valid. However the system doesn't seem to handle the data. How can I be sure they json files are correct? I checked with developer tools and didn't see an error.

Does anyone have any idea what could be going wrong?

Edit: Solution below

Solution

  • Solution:

    My .json files weren't proper array's. Use the following code to make a working JSON file:

    <?php
header('Content-type: application/json');
// Connect to the MySQL database
require_once ("lib/connect.php");

// query - description of query
$sql = "SELECT column FROM table";
    $result = mysqli_query($dbConnection, $sql);

if ($result->num_rows > 0) {
    while ($row = mysqli_fetch_assoc($result)) {
        $json[]=$row;
    }
}

// CLOSE CONNECTION
mysqli_close($dbConnection);

echo json_encode($json);
?>