twitter-bootstrap 如何计算 Bootstrap 表列中的所有值并显示在表页脚中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/42816168/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to calculate all the values in Bootstrap table column and display in table footer
提问by user244394
I have the following bootstrap Json table.
我有以下引导 Json 表。
I want to add all the values in the stars Columns and
我想添加星星列中的所有值和
| Name | Stars | Forks |
Total Stars 2 Total Forks 6
Display in the table as "Total Stars" etc
在表格中显示为“总星级”等
How can I add the column and display the values?
如何添加列并显示值？
<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": "0000"
}, {
"Account": "086-1235",
"ClientName": "y Smith",
"AccountType": "Trust",
"LongMarketValue": "0000"
},
{
"Account": "086-1236",
"ClientName": "y Smith",
"AccountType": "Retail",
"LongMarketValue": "0000"
}]
}
回答by azs06
I am not sure if bootstrap table comes with any method to calculate total, but you could manually calculate and append result.
我不确定引导表是否带有任何计算总数的方法，但您可以手动计算并附加结果。
Something like this
像这样的东西
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){
return a + parseFloat(b.stargazers_count);
}, 0);
var totalForks = data.reduce(function(a, b){
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>
<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>
<script src="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.js"></script>
</body>
</html>回答by Rajan Patil
Hope this will help you.
希望这会帮助你。
<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>
and add this in your function.
并将其添加到您的函数中。
var totalStars = 0;
$(data).each(function(i){
totalStars = totalStars+ parseInt(data[i].stargazers_count);
});
$('#totalStars').html(totalStars);
