php 显示 JSON 数据的引导表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25187349/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap table showing JSON data
提问by Paul
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.
我在我的网站上运行 Bootstrap，并结合了一个名为Bootstrap Tables的引导插件。它请求将数据作为 JSON 文件传送。
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.
但是我在让它工作时遇到了麻烦。我已经尝试了一整天，但没有结果。我还尝试了 Google 和其他代码示例。
My JSON file looks like
我的 JSON 文件看起来像
{"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> </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.
现在，您可以通过可排序的标题看到，Bootstrap Table javascript 处于活动状态。
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.
我还检查了 JSON 文件，虽然我自己制作了它们，但它们似乎有效。然而，系统似乎并没有处理数据。我如何确定他们的 json 文件是正确的？我检查了开发人员工具，没有看到错误。
Does anyone have any idea what could be going wrong?
有谁知道可能会出什么问题？
Edit: Solution below
编辑：下面的解决方案
采纳答案by Paul
Solution:
解决方案：
My .json files weren't proper array's. Use the following code to make a working JSON file:
我的 .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);
?>
回答by nexuscreator
As I cannot comment to your post, I'm writing here:
由于我无法对您的帖子发表评论，因此我在这里写信：
The data.jsonshould 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'.
的data.json应该是一个数组。我在您的 test.json、test2.json、test3.json 中发现的是“test.json 是 json 对象”、“test2.json 是带有数组的 json 对象”和“test3.json 是包含多个对象的单个 json 数组” .
According to the 'getting started section in bootstrap table', it expects json array with json objects. Try this modified data.jsonfrom pastebin.
根据“引导表中的入门部分”，它需要带有 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>
Output:
输出：
回答by wenyi
you can set responseHandleroption, for example like this:
您可以设置responseHandler选项，例如像这样：
html:
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:
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/data4.json
http://wenzhixin.net.cn/p/bootstrap-table/docs/examples.html#card-view
http://wenzhixin.net.cn/p/bootstrap-table/docs/examples.html#card-view
