Question

我在我的网站上运行Bootstrap，并结合了一个名为Bootstrap Tables的引导程序插件。它请求将数据作为JSON文件传递。

我遇到麻烦然而无法上班。我一直在努力一整天，但没有结果。我还尝试了谷歌和其他代码示例。

我的JSON文件看起来像

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

我的测试页面如下：

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

现在您可以通过可排序的标头看到，Bootstrap Table javascript处于活动状态。

我还检查了JSON文件，虽然我自己创建了它们，但它们似乎有效。但是系统似乎没有处理数据。我如何确定他们的json文件是否正确？我查看了开发人员工具并没有看到错误。

有没有人知道会出现什么问题？

编辑：下面的解决方案

Answer 1

由于我无法评论你的帖子，我写在这里：

data.json应该是一个数组。我在test.json，test2.json，test3.json中找到的是'test.json是json对象'，'test2.json是带有数组的json对象'和'test3.json是包含多个对象的单个json数组'

根据bootstrap表中的'入门部分'，它需要带有json对象的json数组。从pastebin尝试这个修改过的data.json。

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

输出： enter image description here

Answer 2

解决方案：

我的.json文件不是正确的数组。使用以下代码生成有效的JSON文件：

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

您可以设置responseHandler选项，例如：

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

Bootstrap表显示JSON数据

3 个答案: