ブートストラップテーブルのdata-urlプロパティを正しく使用するには？

Bootstrapテーブルのdata-urlプロパティを使用する方法を理解しようとしていますここに私のコードです。必要なCSS/JSファイルをすべて追加し、data-urlプロパティに正しいJSONフォームファイルを参照しましたが、まだ結果が表示されません。私はここで何が欠けていますか？ブートストラップテーブルの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

はい、ありがとうございました。なぜ最初のものがうまくいかないのだろうか。たぶんブラウザの問題か何か。とにかくありがとう。 –

ブートストラップテーブルのdata-urlプロパティを正しく使用するには？

答えて

関連する問題