【datatables插件使用方法】获取列标签，获取tfoot标签。column().footer()，tables().footer()说明

最新推荐文章于 2020-08-03 17:38:28 发布

木有会

最新推荐文章于 2020-08-03 17:38:28 发布

阅读量2.3k

点赞数

分类专栏： datatables日常学习文章标签： datatables column().footer() tables().footer()

本文链接：https://blog.csdn.net/mudarn/article/details/80226766

版权

datatables日常学习专栏收录该内容

1 篇文章 0 订阅

订阅专栏

【说明】

column().footer()可以获取页脚单元的th或td标签内容

tables().footer()可以获取tfoot标签内容

【效果】页脚单元将第一列所有内容拼接在一起。

利用column().footer()，示例代码中的表格的第一列最后一个页脚单元，是<tfoot>标签中的<th>name</th>，所以将原来的“name”文字内容，替换成了这一列的数据内容拼接。

[column().footer()]

js代码：
var table = $('#example').DataTable();
var column = table.column( 0 );
 
$( column.footer() ).html(
    column.data().reduce( function (a,b) {
        return a+b;
    } )
);

【效果图】

【效果】移除<tfoot>内容。

利用tables().footer()，将示例代码中的第二个表格<tfoot>标签内容都移除。

[tables().footer()]

    var tables = $('#dataTable').DataTable( {
        scrollX: "100%"
    } );

    tables
        .tables()
        .footer()
        .to$()
        .remove();

【效果图】

【示例源码】

可点击此处下载官方插件，DataTables-1.10.15\examples\api目录下新建html文件，将以下代码复制进去查看效果。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
	<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
	<title>DataTables example - footer给表格最后一列添加样式</title>
	<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
	<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
	<link rel="stylesheet" type="text/css" href="../resources/demo.css">
	<style type="text/css" class="init">
	
	</style>
	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js">
	</script>
	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js">
	</script>
	<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js">
	</script>
	<script type="text/javascript" language="javascript" src="../resources/demo.js">
	</script>
	<script type="text/javascript" language="javascript" class="init">
	

$(document).ready(function() {
    var table = $('#example').DataTable();
    var column = table.column( 0 );
    $( column.footer() ).html(
        column.data().reduce( function (a,b) {
            return a+b;
        } )
    );
    var tables = $('#dataTable').DataTable( {
        scrollX: "100%"
    } );

    tables
        .tables()
        .footer()
        .to$()
        .remove();
} );


	</script>
</head>
<body class="dt-example">
<table id="example" class="display" cellspacing="0" width="100%">
	<thead>
	<tr>
		<th>Name</th>
		<th>Position</th>
		<th>Office</th>
		<th>Age</th>
		<th>Start date</th>
		<th>Salary</th>
	</tr>
	</thead>
	<tfoot>
	<tr>
		<th>Name</th>
		<th>Position</th>
		<th>Office</th>
		<th>Age</th>
		<th>Start date</th>
		<th>Salary</th>
	</tr>
	</tfoot>
	<tbody>
	<tr>
		<td>Tiger Nixon</td>
		<td>System Architect</td>
		<td>Edinburgh</td>
		<td>61</td>
		<td>2011/04/25</td>
		<td>$320,800</td>
	</tr>
	<tr>
		<td>Garrett Winters</td>
		<td>Accountant</td>
		<td>Tokyo</td>
		<td>63</td>
		<td>2011/07/25</td>
		<td>$170,750</td>
	</tr>
	</tbody>
</table>
<table id="dataTable" class="display" cellspacing="0" width="100%">
	<thead>
	<tr>
		<th>Name</th>
		<th>Position</th>
		<th>Office</th>
		<th>Age</th>
		<th>Start date</th>
		<th>Salary</th>
	</tr>
	</thead>
	<tfoot>
	<tr>
		<th>Name</th>
		<th>Position</th>
		<th>Office</th>
		<th>Age</th>
		<th>Start date</th>
		<th>Salary</th>
	</tr>
	</tfoot>
	<tbody>
	<tr>
		<td>Tiger Nixon</td>
		<td>System Architect</td>
		<td>Edinburgh</td>
		<td>61</td>
		<td>2011/04/25</td>
		<td>$320,800</td>
	</tr>
	<tr>
		<td>Garrett Winters</td>
		<td>Accountant</td>
		<td>Tokyo</td>
		<td>63</td>
		<td>2011/07/25</td>
		<td>$170,750</td>
	</tr>
	</tbody>
</table>
</body>
</html>

木有会

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【datatables插件使用方法】获取列标签，获取tfoot标签。column().footer()，tables().footer()说明

【说明】column().footer()可以获取th、td标签内容tables().footer()可以获取tfoot标签内容【js举例】column().footer()为例。tables().footer()差不多。js代码：var table = $('#example').DataTable();var column = table.column( 0 ); $( column....
复制链接

扫一扫