Question

我有以下引导程序Json表。

我想在星列和

中添加所有值

<script>
   

    $(function () {

        $("#jsGrid").jsGrid({
            height: "auto",
            width: "100%",

            sorting: true,
            paging: false,
            autoload: true,
           
            controller: {
                loadData: function (filter) {
                    console.log(filter);
                    return $.ajax({
                        type: "GET",
                        url: "http://localhost:8888/GetListJSGrid",
                        data: filter,
                        dataType: "json"
                    });
                }
            },
           
            fields: [
             { name: "Name", type: "text", width: 150 }
            ]
        });
    });

在表格中显示为“Total Stars”等

如何添加列并显示值？

 | Name               | Stars           | Forks             |

Total Stars $832                       Total Forks $456

Answer 1

我不确定bootstrap表是否附带任何计算总计的方法，但您可以手动计算并附加结果。

像这样的东西

＆＃13;

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

＆＃13;

<!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>

＆＃13;

Answer 2

希望这会对你有所帮助。

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

如何计算Bootstrap表列中的所有值并在表格页脚中显示

2 个答案: