Bootstrap table showing JSON data

Question

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

Answer 1

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

Answer 2

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

Answer 3

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: