Howto使用Boostrap表來獲得使用外部json文件的列總和

我有以下基於引導的表，我試圖計算總MarketValue。它讀取一個外部的json文件。但由於某種原因，它不添加這些值。Howto使用Boostrap表來獲得使用外部json文件的列總和

當我加載外部json時，問題就開始了。文件。我怎樣才能解決這個問題？

$.getJSON("json/prep.json", function (jsonFromFile) { 
    $('#table1').bootstrapTable({ 
     data: jsonFromFile.rows 
    }) 
    var total1 = data.reduce(function(a, b){ 
    return a + parseFloat(b.LongMarketValue); 
}, 0); 

document.querySelector('.total1').innerHTML = total1; 


});

JSON - prep.json

{ 
      "Name": "Julie Brown", 
      "Account": "C0010", 
      "LoanApproved": "12/5/2015", 
      "LastActivity": "4/1/2016", 
      "PledgedPortfolio": "1000", 
      "MaxApprovedLoanAmt": "10000", 
      "LoanBalance": "1849000", 
      "AvailableCredit": "2877.824375", 
      "Aging": "3", 
      "Brokerage": "My Broker", 
      "Contact": "oJohnson", 
      "ContactPhone": "-3614", 
      "RiskCategory": "Yellow", 
      "rows": [{ 
      "Account": "086-1234", 
      "ClientName": "S Smth", 
      "AccountType": "tail", 
      "LongMarketValue": "$40000" 
      }, { 
      "Account": "086-1235", 
       "ClientName": "all Sth", 
      "AccountType": "REV Trust", 
      "LongMarketValue": "$55000" 
      }, 
      { 
      "Account": "086-1236", 
       "ClientName": "Sly Smith", 
      "AccountType": "Reail", 
      "LongMarketValue": "$5500" 
      }] 
     }

HTML

<table id="table1"> 
        <thead> 
         <tr> 
         <th data-field="state" data-checkbox="true"></th> 
          <th data-field="Account">Account #</th> 
          <th data-field="ClientName">Client</th> 
          <th data-field="AccountType">Account Type</th> 
          <th data-field="MarketValue"> Market Value</th> 
         </tr> 
        </thead> 
         <tfoot> 
        <tr> 
         <td></td> 
         <td></td> 
         <th></th> 
         <th> Total <span class="total1"></span></th> 
        </tr> 
        </tfoot> 
       </table>

來源

2017-03-15 user244394

你不能調用你在其可引導配置之外聲明的數據對象 –

data在代碼中未定義，你必須檢索表或JSON數據。您的數據也會返回一個帶有$符號的字符串，因此您必須在解析它之前將其刪除。

這是一個工作示例。

// Code goes here 
 

 
$(function() { 
 
$.getJSON("https://api.myjson.com/bins/89vsf", function (jsonFromFile) { 
 
    $('#table1').bootstrapTable({ 
 
     data: jsonFromFile.rows 
 
    }) 
 
    var data = $('#table1').bootstrapTable('getData'); 
 
    var total1 = data.reduce(function(a, b){ 
 
     
 
    return a + parseFloat(b.LongMarketValue.replace('$','')); 
 
}, 0); 
 

 
document.querySelector('.total1').innerHTML = total1; 
 

 
}); 
 
});

<!DOCTYPE html> 
 
<html> 
 

 
    <head> 
 
    </head> 
 

 
    <body> 
 
    <table id="table1"> 
 
        <thead> 
 
         <tr> 
 
         <th data-field="state" data-checkbox="true"></th> 
 
          <th data-field="Account">Account #</th> 
 
          <th data-field="ClientName">Client</th> 
 
          <th data-field="AccountType">Account Type</th> 
 
          <th data-field="LongMarketValue"> Market Value</th> 
 
         </tr> 
 
        </thead> 
 
         <tfoot> 
 
        <tr> 
 
         <td></td> 
 
         <td></td> 
 
         <td></td> 
 
         <th></th> 
 
         <th> Total <span class="total1"></span></th> 
 
        </tr> 
 
        </tfoot> 
 
       </table> 
 
<script src="https://code.jquery.com/jquery-3.1.0.js"></script> 
 
\t 
 
\t <script src="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.js"></script>  
 
    <script src="script.js"></script> 
 
    </body> 
 

 
</html>

下面是代碼的工作plunker。 http://plnkr.co/edit/PSCR5iS7DSWkuQb1jv5P?p=preview 希望這會有所幫助。

來源

2017-03-16 07:54:23 azs06

謝謝你真的很棒 – user244394

有沒有格式化表列的方法？顯示每個號碼列100000至100,000.00 – user244394

我發佈了有關此問題的答案。 – azs06

Howto使用Boostrap表來獲得使用外部json文件的列總和

回答

相關問題