2016-05-13 3 views
1

私はウェブサイトやそのようなものを作るのが全く新しいです。私は非常にシンプルにすべきことはできませんでした。同じディレクトリにあるJSONファイルをテーブルにロードします。私は答えを探していて、何も私のために働いているようではないので、私は間違ったことをする必要があります。Bootstrapを使ってテーブルにJSONファイルをロードする

私が使用しようとしたthisが見つかりましたが、非常に多くのことを試した後、私はそれを動作させることができませんでした。私の場合は、同じディレクトリにあるJSONファイルにdataがあります。

マイtest.htmlというファイル:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>Test</title> 
    <meta name="description" content="Hello World"> 
    <!-- Latest compiled and minified CSS --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 

    <!-- Optional theme --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous"> 

    <script> 
    var data = 
    [ 
     { 
      "id": 0, 
      "name": "test0", 
      "price": "$0" 
     }, 
     { 
      "id": 1, 
      "name": "test1", 
      "price": "$1" 
     }, 
     { 
      "id": 2, 
      "name": "test2", 
      "price": "$2" 
     }, 
     { 
      "id": 3, 
      "name": "test3", 
      "price": "$3" 
     }, 
     { 
      "id": 4, 
      "name": "test4", 
      "price": "$4" 
     }, 
     { 
      "id": 5, 
      "name": "test5", 
      "price": "$5" 
     }, 
     { 
      "id": 6, 
      "name": "test6", 
      "price": "$6" 
     }, 
     { 
      "id": 7, 
      "name": "test7", 
      "price": "$7" 
     }, 
     { 
      "id": 8, 
      "name": "test8", 
      "price": "$8" 
     }, 
     { 
      "id": 9, 
      "name": "test9", 
      "price": "$9" 
     }, 
     { 
      "id": 10, 
      "name": "test10", 
      "price": "$10" 
     }, 
     { 
      "id": 11, 
      "name": "test11", 
      "price": "$11" 
     }, 
     { 
      "id": 12, 
      "name": "test12", 
      "price": "$12" 
     }, 
     { 
      "id": 13, 
      "name": "test13", 
      "price": "$13" 
     }, 
     { 
      "id": 14, 
      "name": "test14", 
      "price": "$14" 
     }, 
     { 
      "id": 15, 
      "name": "test15", 
      "price": "$15" 
     }, 
     { 
      "id": 16, 
      "name": "test16", 
      "price": "$16" 
     }, 
     { 
      "id": 17, 
      "name": "test17", 
      "price": "$17" 
     }, 
     { 
      "id": 18, 
      "name": "test18", 
      "price": "$18" 
     }, 
     { 
      "id": 19, 
      "name": "test19", 
      "price": "$19" 
     }, 
     { 
      "id": 20, 
      "name": "test20", 
      "price": "$20" 
     } 
    ]; 

    $(function() { 
     $('#table').bootstrapTable({ 
      data: data 
     }); 
    }); 
    </script> 
</head> 

<body> 
    <header> 
    <div class="jumbotron"> 
     <div class="container"> 
     <h3>Testing table in bootstrap</h3> 
     </div> 
    </div> 
    </header> 

    <div class="container"> 
    <div class="row"> 
     <table id="table" class="table table-bordered"> 
     <thead> 
      <tr class="info"> 
      <th data-field="id">First name</th> 
      <th data-field="name">Last name</th> 
      <th data-field="price">Age</th> 
      </tr> 
     <thead> 
     </table> 
    </div> 
    </div> 


    <footer> 
    <div class="container"> 
     <hr> 
     <p><small><a href="http://google.com">Link</a> link</small></p> 
    </div> 
    </footer> 

    <script src="https://code.jquery.com/jquery-2.2.3.min.js"></script> 
    <!-- Latest compiled and minified JavaScript --> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> 
</body> 
</html> 

私は単にブートストラップを使用してテーブルにJSONファイルをロードします。

答えて

3

あなたのすべての外部スクリプトは、headタグ

var data = 
 
    [ 
 
     { 
 
      "id": 0, 
 
      "name": "test0", 
 
      "price": "$0" 
 
     }, 
 
     { 
 
      "id": 1, 
 
      "name": "test1", 
 
      "price": "$1" 
 
     }, 
 
     { 
 
      "id": 2, 
 
      "name": "test2", 
 
      "price": "$2" 
 
     }, 
 
     { 
 
      "id": 3, 
 
      "name": "test3", 
 
      "price": "$3" 
 
     }, 
 
     { 
 
      "id": 4, 
 
      "name": "test4", 
 
      "price": "$4" 
 
     }, 
 
     { 
 
      "id": 5, 
 
      "name": "test5", 
 
      "price": "$5" 
 
     }, 
 
     { 
 
      "id": 6, 
 
      "name": "test6", 
 
      "price": "$6" 
 
     }, 
 
     { 
 
      "id": 7, 
 
      "name": "test7", 
 
      "price": "$7" 
 
     }, 
 
     { 
 
      "id": 8, 
 
      "name": "test8", 
 
      "price": "$8" 
 
     }, 
 
     { 
 
      "id": 9, 
 
      "name": "test9", 
 
      "price": "$9" 
 
     }, 
 
     { 
 
      "id": 10, 
 
      "name": "test10", 
 
      "price": "$10" 
 
     }, 
 
     { 
 
      "id": 11, 
 
      "name": "test11", 
 
      "price": "$11" 
 
     }, 
 
     { 
 
      "id": 12, 
 
      "name": "test12", 
 
      "price": "$12" 
 
     }, 
 
     { 
 
      "id": 13, 
 
      "name": "test13", 
 
      "price": "$13" 
 
     }, 
 
     { 
 
      "id": 14, 
 
      "name": "test14", 
 
      "price": "$14" 
 
     }, 
 
     { 
 
      "id": 15, 
 
      "name": "test15", 
 
      "price": "$15" 
 
     }, 
 
     { 
 
      "id": 16, 
 
      "name": "test16", 
 
      "price": "$16" 
 
     }, 
 
     { 
 
      "id": 17, 
 
      "name": "test17", 
 
      "price": "$17" 
 
     }, 
 
     { 
 
      "id": 18, 
 
      "name": "test18", 
 
      "price": "$18" 
 
     }, 
 
     { 
 
      "id": 19, 
 
      "name": "test19", 
 
      "price": "$19" 
 
     }, 
 
     { 
 
      "id": 20, 
 
      "name": "test20", 
 
      "price": "$20" 
 
     } 
 
    ]; 
 

 
    $(function() { 
 
     $('#table').bootstrapTable({ 
 
      data: data 
 
     }); 
 
    });
<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>Test</title> 
 
    <!--All your external script goes here!!!--> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> 
 
<link rel="stylesheet" href="https://rawgit.com/wenzhixin/bootstrap-table/master/dist/bootstrap-table.min.css"> 
 
<script src="https://rawgit.com/wenzhixin/bootstrap-table/master/dist/bootstrap-table.min.js"></script> 
 
    
 
</head> 
 

 
<body> 
 
    <header> 
 
    <div class="jumbotron"> 
 
     <div class="container"> 
 
     <h3>Testing table in bootstrap</h3> 
 
     </div> 
 
    </div> 
 
    </header> 
 

 
    <div class="container"> 
 
    <div class="row"> 
 
     <table id="table"> 
 
     <thead> 
 
      <tr class="info"> 
 
      <th data-field="id">First name</th> 
 
      <th data-field="name">Last name</th> 
 
      <th data-field="price">Age</th> 
 
      </tr> 
 
     <thead> 
 
     </table> 
 
    </div> 
 
    </div> 
 

 

 
    <footer> 
 
    <div class="container"> 
 
     <hr> 
 
    </div> 
 
    </footer> 
 

 
</body> 
 
</html>

+0

でなければなりません私は単にヘッダ内の '' の間にjQueryを追加しますか?私はとにかくそれを試みました、そして、それはまだ働いていないようです。 – user5368737

+0

質問が更新されましたが、まだ動作していないようです。 – user5368737

+0

@ user5368737、私は自分のソリューションを編集しました。あなたはjQueryライブラリが欠けています。これはエラーです。 – praguan

関連する問題