ブートストラップテーブルの列のすべての値を計算し、表のフッターに表示する方法

次のブートストラップJsonテーブルがあります。私はブートストラップテーブルの列のすべての値を計算し、表のフッターに表示する方法

どのように列および表示を追加することができますなど「トータルスター」として、すべての星の列の値とテーブル内の

| Name    | Stars   | Forks    | 

Total Stars $832      Total Forks $456

表示を追加したい

Fiddle

その価値？

<table id="table"> 
    <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> 
    </tr> 
    </thead> 
</table> 




JSON temp.json 

{ 
     "Name": "Julie own", 
     "Account": "C0010", 
     "LoanApproved": "12/5/2015", 
     "LastActivity": "4/1/2016", 
     "PledgedPortfolio": "1000000", 
     "MaxApprovedLoanAmt": "1000000", 
     "LoanBalance": "1849000", 
     "AvailableCredit": "201877.824375", 
     "Aging": "3", 
     "Brokerage": "My Broker", 
     "Contact": "R Johnson", 
     "ContactPhone": "-3614", 
     "RiskCategory": "Yellow", 
     "rows": [{ 
     "Account": "086-1234", 
     "ClientName": "Sal Smith", 
     "AccountType": "Ret", 
     "LongMarketValue": "$450000" 
     }, { 
     "Account": "086-1235", 
      "ClientName": "y Smith", 
     "AccountType": "Trust", 
     "LongMarketValue": "$550000" 
     }, 
     { 
     "Account": "086-1236", 
      "ClientName": "y Smith", 
     "AccountType": "Retail", 
     "LongMarketValue": "$550000" 
     }] 
    }

出典

2017-03-15 user244394

合計を計算する方法がブートストラップテーブルに付属しているかどうかはわかりませんが、手動で計算して結果を追加できます。この

var data = [ 
 
    { 
 
     "name": "bootstrap-table", 
 
     "stargazers_count": "526", 
 
     "forks_count": "122", 
 
     "description": "An extended Bootstrap table with radio, checkbox, sort, pagination, and other added features. (supports twitter bootstrap v2 and v3) " 
 
    }, 
 
    { 
 
     "name": "multiple-select", 
 
     "stargazers_count": "288", 
 
     "forks_count": "150", 
 
     "description": "A jQuery plugin to select multiple elements with checkboxes :)" 
 
    }, 
 
    { 
 
     "name": "bootstrap-show-password", 
 
     "stargazers_count": "32", 
 
     "forks_count": "11", 
 
     "description": "Show/hide password plugin for twitter bootstrap." 
 
    }, 
 
    { 
 
     "name": "blog", 
 
     "stargazers_count": "13", 
 
     "forks_count": "4", 
 
     "description": "my blog" 
 
    }, 
 
    { 
 
     "name": "scutech-redmine", 
 
     "stargazers_count": "6", 
 
     "forks_count": "3", 
 
     "description": "Redmine notification tools for chrome extension." 
 
    } 
 
]; 
 

 
$(function() { 
 
    $('#table').bootstrapTable({ 
 
     data: data 
 
    }); 
 
var totalStars = data.reduce(function(a, b){ 
 
\t return a + parseFloat(b.stargazers_count); 
 
}, 0); 
 
var totalForks = data.reduce(function(a, b){ 
 
\t return a + parseFloat(b.forks_count); 
 
}, 0); 
 
document.querySelector('.totalStars').innerHTML = totalStars; 
 
document.querySelector('.totalForks').innerHTML = totalForks; 
 
});

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 
\t <link rel="stylesheet" href="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.css"> 
 
</head> 
 
<body> 
 
<table id="table"> 
 
    <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> 
 
    </tr> 
 
    </thead> 
 
     <tfoot> 
 
    <tr> 
 
     <td></td> 
 
     <td></td> 
 
     <th>Total Stars <span class="totalStars"></span></th> 
 
     <th>Total Forks <span class="totalForks"></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> 
 
</body> 
 
</html>

出典

2017-03-15 18:23:30 azs06

よう

何かはありがとうございました。私はデータにjsonファイルを渡そうとするとすぐに質問します。それは動作しないようです。 $（関数（）{ $（ '＃1 TABLE1'）bootstrapTable（{ \tデータ： "JSON/loan_prep.json"; }）; するvar TOTAL1 = data.reduce（関数（a、b）は、{。 \t戻りA + parseFloatは（b.LongMarketValue）; }、0）; VAR totalForks = data.reduce（関数（B）{ \t戻りA + parseFloatは（b.forks_count）; }、0） ; document.querySelector（ '。totallmv'）。innerHTML = total1; }）; – user244394

私が提供した例では、結果を計算するためにデータ変数を直接使用しています.jsonからデータをロードする場合は、 'getData'メソッドを使用してテーブルデータを取得し、計算します。ここでは、' getData'を使用する例です。https：// jsbin .com/kujonus/edit？html、js、output – azs06

はい、私は外部ソースからjsonを読み込んでいて、それはそのための作業ではありません。 – user244394

希望すると、これが役に立ちます。

<table id="table"> 
<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> 
</tr> 
</thead> 
<tfoot> 
    <tr> 
    <td></td> 
    <td>Total Stars</td> 
    <td id="totalStars"></td> 
    <td></td> 
    </tr> 
</tfoot> 
</table>

この機能をあなたの機能に追加してください。

var totalStars = 0; 

$(data).each(function(i){ 
    totalStars = totalStars+ parseInt(data[i].stargazers_count); 
}); 
$('#totalStars').html(totalStars);

出典

2017-03-15 18:03:30

ブートストラップテーブルの列のすべての値を計算し、表のフッターに表示する方法

答えて

関連する問題