So zeigen Sie JSON-Daten in der Bootstrap-Tabelle an

Question

Ich versuche die Bootstrap-Tabelle zu verwenden, um Json-Daten zu laden. Wie kann ich eine externe JSON-Datei in die Bootstrap-Tabelle unten laden.

FIDDLE

HTML

<table data-toggle="table" 
     data-url="/gh/get/response.json/wenzhixin/bootstrap-table/tree/master/docs/data/data1/" 
     data-click-to-select="true"> 
    <thead> 
    <tr> 
     <th data-field="state" data-checkbox="true"></th> 
     <th data-field="name">Name</th> 
     <th data-field="stargazers_count">Stars</th> 
     <th data-field="forks_count">Forks</th> 
     <th data-field="description">Description</th> 
    </tr> 
    </thead> 
</table> 

JSON

{ 
     "Name": "Jeame whos", 
     "LoanApproved": "12/5/2015", 
     "LastActivity": "4/1/2016", 
     "Aging": "3", 
     "Brokerage": "My Broker", 
     "Contact": "J. Johnson", 
     "ContactPhone": "(212) 902-3614", 
     "RiskCategory": "Yellow", 
     "rows": [{ 
     "Account": "086-1234", 
     "ClientName": "Sally Sung", 
     "AccountType": "$01", 
     "MarketValue": "450000" 
     }, { 
     "Account": "086-1235", 
      "ClientName": "Sally Sung", 
     "AccountType": "rust", 
     "MarketValue": "550000" 
     }, 
     { 
     "Account": "086-1236", 
      "ClientName": "Sally Sung", 
     "AccountType": "Retail", 
     "MarketValue": "550000" 
     }] 
    } 

Answer 1

Ich bemerkte, dass Ihre JSON nicht gültig ist. Siehe Zeile "Name": "Jeames "C0010",, es gibt ein zusätzliches Angebot. Es sollte "Name": "Jeames C0010", sein.

Aber ich schrieb auch auch ein Beispiel oben:

$.getJSON("http://neil.computer/stack/response.json", function (jsonFromFile) { 
 
\t $('#table').bootstrapTable({ 
 
\t \t data: jsonFromFile.rows 
 
\t }) 
 
});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css"> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.1/bootstrap-table.min.css"> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.1/bootstrap-table.min.js"></script> 
 

 
<div class="container"> 
 
\t <table id="table"> 
 
\t \t <thead> 
 
\t \t \t <tr> 
 
\t \t \t \t <th data-field="Account">Item ID</th> 
 
\t \t \t \t <th data-field="ClientName">Item Name</th> 
 
\t \t \t \t <th data-field="AccountType">Item Price</th> 
 
\t \t \t \t <th data-field="MarketValue">Item Price</th> 
 
\t \t \t </tr> 
 
\t \t </thead> 
 
\t </table> 
 
</div>