如何正确使用Bootstrap表的data-url属性？

我想弄清楚如何使用引导表的数据url属性这是我的代码。我添加了所有必需的CSS/JS文件，并在data-url属性中引用了正确的JSON格式文件，但仍未显示任何结果。我在这里错过了什么？如何正确使用Bootstrap表的data-url属性？

<!doctype html> 
 
<html lang="en"> 
 

 
<head> 
 

 
<!-- Required CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.css"> 
 

 
</head> 
 

 
<body> 
 

 
<table class ="table table-hover" id ="table" data-toggle="table" data-url="https://raw.githubusercontent.com/wenzhixin/bootstrap-table-examples/master/json/data1.json"> 
 
    <thead> 
 
     <tr> 
 
      <th data-field="id">Item ID</th> 
 
      <th data-field="name">Item Name</th> 
 
      <th data-field="price">Item Price</th> 
 
     </tr> 
 
    </thead> 
 
</table> 
 
</body> 
 

 
<!-- Required js --> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.js"></script> 
 
<script> 
 
    $(table).bootstrapTable('refresh', { 
 
     url: 'https://raw.githubusercontent.com/wenzhixin/bootstrap-table-examples/master/json/data1.json' 
 
    }); 
 
</script> 
 

 
</html>

来源

2017-04-22 Ahmed Jamil

看在你的浏览器的调试器的网络选项卡。由于同源策略，您很可能会收到400错误。浏览器无法*请求来自不同于其托管的域的内容。

*通常情况下，这是有道理的。

https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy

来源

2017-04-22 23:44:51 AndyB

是的，你是非常正确的，但根据这里http://jsfiddle.net/wenyi/e3nk137y/13/（来自例如：http://bootstrap-table.wenzhixin.net。 cn/examples /）我的jsfiddle例子也可以工作，但它不是https://jsfiddle.net/gsz6kkzq/。它使用数据对象来加载字段 –

我做了一些调整，并使其工作。我删除了data-toggle =“table”并更改了 '$（“＃table”）。bootstrapTable（'refresh'，{ data：d }）; ' 这样： '$（ “＃表”）bootstrapTable（{ 数据：d }）;' https://jsfiddle.net/gsz6kkzq/1/ – AndyB

是的，谢谢你。想知道为什么第一个不起作用。也许浏览器问题什么的。不管怎么说，还是要谢谢你。 –

如何正确使用Bootstrap表的data-url属性？

回答

相关问题