twitter-bootstrap 如何使用引导表从服务器加载数据？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27620433/
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
How to load data from server using bootstrap-table?
提问by user3072613
I am using the bootstrap-table plugin to display data from the server in an HTML table but I have not been able to get it to work. Here is the plugin URL: http://bootstrap-table.wenzhixin.net.cn/
我正在使用 bootstrap-table 插件在 HTML 表中显示来自服务器的数据，但我无法让它工作。这里是插件网址：http: //bootstrap-table.wenzhixin.net.cn/
Here is my code:
这是我的代码：
<table data-url="http://wenzhixin.net.cn/examples/bootstrap_table/data" data-pagination="true" data-page-list="[5, 10, 20, 50, 100, 200]" data-search="true" data-toggle="table" id="table">
<thead>
<tr>
<th data-field="state" data-checkbox="true"></th>
<th data-field="id" data-align="right" data-sortable="true">Item ID</th>
<th data-field="name" data-align="center" data-sortable="true">Item Name</th>
<th data-field="price" data-sortable="true">Item Price</th>
</tr>
</thead>
</table>
I have loaded all necessary files but this will not work.
我已经加载了所有必要的文件，但这不起作用。
Here is the fiddle: http://jsfiddle.net/qoyho5jg/
这是小提琴：http: //jsfiddle.net/qoyho5jg/
回答by marinuak
This is the correct JSON format:
这是正确的 JSON 格式：
{"total":4,"rows":[{"id":"1","name":"Item 1","price":"123"},{"id":"2","name":"Item 2","price":"123"}]}
回答by wangzhiwei
if you use method 'load'
如果您使用方法“加载”
$('#table').bootstrapTable('load', data);
you should notice that， data must be array and JS object
你应该注意到，数据必须是数组和JS对象
example:
例子：
data = "[{"a": 1}, {"a": 2}]" # error
JSON.parse(data) # parse json string to JS object
回答by agentpx
Make sure you put this code inside the head element of your web page
确保将此代码放在网页的 head 元素中
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap- table/1.5.0/bootstrap-table.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.5.0/bootstrap-table.min.js"></script>
<!-- Latest compiled and minified Locales -->
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.5.0/locale/bootstrap- table-zh-CN.min.js"></script>
<html>
<head>
/* Put the scripts above here...*/
/*You missed to place this script*/
/*Of course you need to modify the correct URL and data
If you can give me your URL then I can post a sample ajax call for that*/
$('#table').bootstrapTable({
url: 'data1.json',
columns: [{
field: 'id',
title: 'Item ID'
},
{field: 'name',
title: 'Item Name'
},
{
field: 'price',
title: 'Item Price'
}, ]
});
</head>
<body>
<table data-url="http://wenzhixin.net.cn/examples/bootstrap_table/data" data- pagination="true" data-page-list="[5, 10, 20, 50, 100, 200]" data-search="true" data- toggle="table" id="table">
<thead>
<tr>
<th data-field="state" data-checkbox="true"></th>
<th data-field="id" data-align="right" data-sortable="true">Item ID</th>
<th data-field="name" data-align="center" data-sortable="true">Item Name</th>
<th data-field="price" data-sortable="true">Item Price</th>
</tr>
</thead>
</table>
</body>
</html>
回答by MrSo
It seems your json response is not well formated. Pls take a look at your JSON data to match the required format as it's shown in the examples I found in the Github repository demo.response.json
看来您的 json 响应格式不正确。请查看您的 JSON 数据以匹配所需的格式，如我在 Github 存储库demo.response.json 中找到的示例中所示
[
{
"id": 0,
"name": "Item 0",
"price": "##代码##"
},
{
"id": 2,
"name": "Item 2",
"price": ""
},
...
]
