CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrap
user244394
user244394

Reputation: 13448

How to calculate all the values in Bootstrap table column and display in table footer

I have the following bootstrap Json table.

Fiddle

I want to add all the values in the stars Columns and 

 | Name               | Stars           | Forks             |

Total Stars $832                       Total Forks $456

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": "$450000"
      },  {
        "Account": "086-1235",
          "ClientName": "y Smith",
        "AccountType": "Trust",
        "LongMarketValue": "$550000"
      },
       {
        "Account": "086-1236",
          "ClientName": "y Smith",
        "AccountType": "Retail",
        "LongMarketValue": "$550000"
      }]
    }

Upvotes: 1

Views: 22663

Answers (2)

azs06
azs06

Reputation: 3517

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>

Upvotes: 2

Rajan Patil
Rajan Patil

Reputation: 1002

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);

Upvotes: 0

Related Questions