Twitter bootstrap 如何使用引导表从服务器加载数据？_Twitter Bootstrap

Twitter bootstrap 如何使用引导表从服务器加载数据？

twitter-bootstrap

Twitter bootstrap 如何使用引导表从服务器加载数据？,twitter-bootstrap,Twitter Bootstrap,我正在使用bootstrap表插件在一个HTML表中显示来自服务器的数据，但我一直无法让它工作。以下是插件URL：这是我的密码：项目ID 项目名称项目价格我已加载所有必要的文件，但这将无法工作下面是提示：确保将此代码放在网页的head元素中  <link rel="stylesheet" href="//cdnjs.cloudflare.com/aj

我正在使用bootstrap表插件在一个HTML表中显示来自服务器的数据，但我一直无法让它工作。以下是插件URL：

这是我的密码：


项目ID
项目名称
项目价格

我已加载所有必要的文件，但这将无法工作

下面是提示：

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


/*把上面的脚本放在这里*/
/*您没有放置此脚本*/
/*当然，您需要修改正确的URL和数据
如果你能给我你的URL，那么我可以发布一个示例ajax调用*/
$（“#表”）.bootstrapTable({
url:'data1.json'，
栏目：[{
字段：“id”，
标题：“项目ID”
},
{字段：'名称'，
标题：“项目名称”
}, 
{
字段：'价格'，
标题：“项目价格”
}, ]
});
项目ID
项目名称
项目价格

您的json响应似乎格式不好。请查看您的JSON数据以匹配所需的格式，如我在Github存储库中找到的示例所示

这是正确的JSON格式：

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

如果使用“加载”方法

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

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

例如：

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

你能提供一个例子吗？嗨，这里是提琴：我检查了你的提琴，没有ajax/jquery调用来提取数据。@agentpx是的，这是因为JSFIDLE不允许对ajax请求进行远程访问，如果这些请求不是按规则进行的。所以user3072613应该将其直接嵌入集成工具中。@user3072613以便您可以验证答案？：）

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