Question

我正在使用bootstrap-table插件在HTML表格中显示来自服务器的数据，但我无法让它工作。以下是插件网址：http://bootstrap-table.wenzhixin.net.cn/

这是我的代码：

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

我已经加载了所有必要的文件，但这不起作用。

这是小提琴：http://jsfiddle.net/qoyho5jg/

Answer 1

这是正确的JSON格式：

{"total":4,"rows":[{"id":"1","name":"Item 1","price":"123"},{"id":"2","name":"Item 2","price":"123"}]}

Answer 2

确保将此代码放在网页的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>

Answer 3

看来你的json响应没有很好地形成。请查看您的JSON数据以匹配所需格式，如我在Github存储库demo.response.json中找到的示例中所示

[
    {
        "id": 0,
        "name": "Item 0",
        "price": "$0"
    },
    {
        "id": 2,
        "name": "Item 2",
        "price": "$2"
    },
    ...
]

Answer 4

如果您使用方法'load'

$('#table').bootstrapTable('load', data);

你应该注意到，数据必须是数组和JS对象

示例：

data = "[{"a": 1}, {"a": 2}]"  # error
JSON.parse(data)  # parse json string to JS object

如何使用bootstrap-table从服务器加载数据？

4 个答案: