<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="./jquery.dataTables.min.css">
<link rel="stylesheet" href="./dataTables.bootstrap4.css">
</head>
<body>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>姓名</th>
<th>职务</th>
<th>办公地</th>
<th>薪水</th>
</tr>
</thead>
<!-- 必须要添加 tfoot标签 -->
<tfoot>
<tr>
<th style="text-align:right">合计:</th>
<th></th>
<th></th>
<th></th>
</tr>
</tfoot>
<tbody>
<tr>
<td>马韵</td>
<td>CEO</td>
<td>杭州</td>
<td>10000</td>
</tr>
<tr>
<td>本田太郎</td>
<td>会计</td>
<td>东京</td>
<td>2500</td>
</tr>
<tr>
<td>克里斯</td>
<td>攻城狮</td>
<td>纽约</td>
<td>3000</td>
</tr>
<tr>
<td>斯蒂芬</td>
<td>编程大佬</td>
<td>伦敦</td>
<td>4000</td>
</tr>
<tr>
<td>马韵</td>
<td>CEO</td>
<td>杭州</td>
<td>10000</td>
</tr>
<tr>
<td>本田太郎</td>
<td>会计</td>
<td>东京</td>
<td>2500</td>
</tr>
<tr>
<td>克里斯</td>
<td>攻城狮</td>
<td>纽约</td>
<td>3000</td>
</tr>
<tr>
<td>斯蒂芬</td>
<td>编程大佬</td>
<td>伦敦</td>
<td>4000</td>
</tr>
<tr>
<td>本田太郎</td>
<td>会计</td>
<td>东京</td>
<td>2500</td>
</tr>
<tr>
<td>克里斯</td>
<td>攻城狮</td>
<td>纽约</td>
<td>3000</td>
</tr>
<tr>
<td>斯蒂芬</td>
<td>编程大佬</td>
<td>伦敦</td>
<td>4000</td>
</tr>
<tr>
<td>马韵</td>
<td>CEO</td>
<td>杭州</td>
<td>10000</td>
</tr>
<tr>
<td>本田太郎</td>
<td>会计</td>
<td>东京</td>
<td>2500</td>
</tr>
<tr>
<td>克里斯</td>
<td>攻城狮</td>
<td>纽约</td>
<td>3000</td>
</tr>
<tr>
<td>斯蒂芬</td>
<td>编程大佬</td>
<td>伦敦</td>
<td>4000</td>
</tr>
</tbody>
</table>
</body>
</html>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<!-- <script src="dataTables.bootstrap4.js"></script> -->
<script src="./jquery.dataTables.min.js"></script>
<script>
$(function(){
// alert()
})
$(document).ready(function() {
$('#example').dataTable( {
"fnFooterCallback": function ( row, data, start, end, display ) {
$(row).find('th').eq(0).html( "合计： ");
var api = this.api(), data;
// Remove the formatting to get integer data for summation
var intVal = function ( i ) {
return typeof i === 'string' ?
i.replace(/[\$,]/g, '')*1 :
typeof i === 'number' ?
i : 0;
};
//所有页数据的第五列之和
total = api
.column( 3 )
.data()
.reduce( function (a, b) {
return intVal(a) + intVal(b);
} );
// 当前页数据的第五列之和
pageTotal = api
.column( 3, { page: 'current'} )
.data()
.reduce( function (a, b) {
return intVal(a) + intVal(b);
}, 0 );
// Update footer
$( api.column( 3 ).footer() ).html(
pageTotal +' ( '+ total +' 总计)'
);
}
} );
} );
</script>
版权声明：本文为qq_37621866原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。