DataTables 入门使用
前言简述
DataTables是一个JavaScript类库，它操作HTML表格，改变表格CSS样式，增强表格功能使其更具有交互性。
DataTables依赖于JQuery类库。
入门示例
环境：DataTables 1.10.11 、JQuery 2.2.1
入门代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>DataTable Learning</title>
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css" />
</head>
<body>
<table id="table_id" class="display">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1 Data 1</td>
<td>Row 1 Data 2</td>
</tr>
<tr>
<td>Row 2 Data 1</td>
<td>Row 2 Data 2</td>
</tr>
</tbody>
</table>
<!-- jquery.js 要先于 jquery.dataTables.min.js 引入 -->
<script src="//cdn.bootcss.com/jquery/2.2.1/jquery.js" type="text/javascript"></script>
<script src="//cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$('#table_id').DataTable();
})
</script>
</body>
</html>使用要点
1、首先引入DataTables必需的文件：jquery.dataTables.min.css 和 jquery.dataTables.min.js
2、因为DataTable依赖于JQuery，所以在引入DataTables的JS文件之前，还要先引入JQuery文件：jquery.js
3、定义普通的HTML表格：<table id="table_id">...</table>
4、使用DataTable初始化表格：$('#table_id').DataTable();
5、示例表格中有一个样式：class="display"，这是DataTables的CSS文件中的样式。
相关推荐
xiaoge00 2020-03-01
83443560 2014-06-28
ywy0 2018-05-05
bluemengcom 2017-12-07
郭贝贝编程 2017-05-24
yongyonglsy 2016-11-07
momode 2016-10-06
lpch0 2016-09-01
jiaojiao0 2016-07-14
83443560 2015-04-28
asdjkl 2015-03-20
SanBa 2014-11-07
LingPF 2019-06-27
lqadam 2014-03-17
Chydar 2019-06-26
XiaoSpring 2013-03-11
黑色幽默 2012-10-17
83453065 2012-06-04