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

As I cannot comment to your post, I'm writing here:

The data.json should be an array. What I found in your test.json, test2.json, test3.json is that 'test.json is json object', 'test2.json is json object with array' and 'test3.json is single json array containing multiple objects'.

According to the 'getting started section in bootstrap table', it expects json array with json objects. Try this modified data.json from pastebin.

        <table data-toggle="table" data-url="data.json" data-height="299">
            <thead>
                <tr>
                    <th data-field="giveawayid">Item ID</th>
                    <th data-field="creatorid">Creator</th>
                    <th data-field="created">Created</th>
                </tr>
            </thead>
        </table>

Output:

you can set responseHandler option, for example like this:

html:

<table data-url="data4.json" data-height="299" data-card-view="true" data-response-handler="responseHandler">
    <thead>
    <tr>
        <th data-field="name">Name</th>
        <th data-field="license">License</th>
        <th data-field="description">Description</th>
        <th data-field="url">Url</th>
    </tr>
    </thead>
</table>

js:

// client side
function responseHandler(res) {
    return res.repos;
}

http://wenzhixin.net.cn/p/bootstrap-table/docs/data4.json

http://wenzhixin.net.cn/p/bootstrap-table/docs/examples.html#card-view

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);
?>

来源：https://stackoverflow.com/questions/25187349/bootstrap-table-showing-json-data

标签

php

json

twitter-bootstrap

html-table

bootstrap-table