显示 JSON 数据的引导表答案

【问题标题】：Bootstrap table showing JSON data显示 JSON 数据的引导表
【发布时间】：2014-09-30 23:31:28
【问题描述】：

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

我在让它工作时遇到了麻烦。我已经尝试了一整天，但没有结果。我还尝试了 Google 和其他代码示例。

我的 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 文件是正确的？我检查了开发者工具，没有发现错误。

有人知道可能出了什么问题吗？

编辑：下面的解决方案

【问题讨论】：

可以在此处找到引导表：wenzhixin.net.cn/p/bootstrap-table/docs（我不允许创建超过 2 个链接）
可能您的服务器发送的标头有误，在您打印任何数据之前，请尝试使用 php 将标头设置为header('Content-type: application/json'); 设置标头之前很重要将任何输出写入浏览器。
examples 似乎将数据包含在一个数组中，每行一个元素。您的数据中没有任何数组。要对此进行测试，请尝试将您的数据包装在 [ 和 ] 中。
我看到 [ ] 和 IIRC 之间有多余的空格 jQuery 对格式非常挑剔。此外，您正在使用大写标签，<TH> 等，不知道这是否会影响任何东西，但小写仍然被认为是更好的做法。代码是用 PHP 内置的 JSON 函数返回的，还是 JSON 是如何创建的？

标签： php json twitter-bootstrap html-table bootstrap-table

【解决方案1】：

由于我无法对您的帖子发表评论，所以我在这里写：

data.json 应该是一个数组。我在您的 test.json、test2.json、test3.json 中发现“test.json 是 json 对象”、“test2.json 是带有数组的 json 对象”和“test3.json 是包含多个对象的单个 json 数组” .

根据“引导表中的入门部分”，它需要带有 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>

输出：

【讨论】：

谢谢...这使它工作！ data.json 应该是一个数组。

【解决方案2】：

你可以设置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

【讨论】：

【解决方案3】：

解决方案：

我的 .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);
?>

【讨论】：