2014-09-19 84 views
2

我正在嘗試遵循此Bootstrap教程here,並且到目前爲止有以下代碼。此代碼似乎加載HTML頁面正常,但它不會加載.json文件中的數據,即使.json文件位於同一目錄中。我將這些文件放在我的網絡服務器上,並通過Chrome瀏覽器查看頁面,但仍然是空表格。控制檯不顯示任何東西。我怎樣才能讓data1.json數據在表格中顯示,以及我怎樣才能解決這個問題?Bootstrap示例:將數據從JSON加載到表中

謝謝

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>Bootstrap 101 Template</title> 

    <!-- Bootstrap --> 
    <link href="css/bootstrap.min.css" rel="stylesheet"> 

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> 
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> 
    <!--[if lt IE 9]> 
     <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> 
     <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> 
    <![endif]--> 
    </head> 
    <body> 
    <h1>Hello, world!</h1> 

    <table data-toggle="table" data-url="data1.json" data-cache="false" data-height="299"> 
    <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> 

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
    <!-- Include all compiled plugins (below), or include individual files as needed --> 
    <script src="js/bootstrap.min.js"></script> 
    </body> 
</html> 

回答

7

引導不支持您要使用的表格功能。你必須包含Bootstrap Table。否則它將無法工作。下載Bootstrap表並在你的代碼中使用它。 http://bootstrap-table.wenzhixin.net.cn/getting-started

+0

謝謝 - 表正在頁面上加載,但它仍然缺少數據。當我把data-url = data1.json或完整的https:// www。示例服務器上文件的路徑我仍然在控制檯中收到錯誤消息:XMLHttpRequest無法加載http://www.wenzhixin.net.cn/p/bootstrap-table/docs/data1.json?_=1411124131792。請求的資源上沒有「Access-Control-Allow-Origin」標題。因此不允許原產地'null'訪問。 – AAA 2014-09-19 10:58:06

+0

它似乎在Web服務器端的跨域設置問題。當我在本地嘗試教程代碼(即不是在wrb servet)時,我可以看到包含數據的表格。 – handk 2014-09-20 02:43:49

+0

那麼你能解決這個問題嗎?我也一直在收到這個錯誤。 – 2015-11-14 04:15:38

2

遲到的答案,但以防萬一有人在這個問題。使用類似Ajax的請求的一個問題是您需要一臺服務器。幾乎所有的服務器都可以這樣做,但是無法在純文件系統上運行。