首先分享一个DataTables实例:
https://www.jianshu.com/p/b3bce8b0c922
Datatables是一款jquery表格插件。它是一个高度灵活的工具,可以将任何HTML表格添加高级的交互功能。
1>分页,即时搜索和排序
2>几乎支持任何数据源:DOM, javascript, Ajax 和 服务器处理
3>支持不同主题 DataTables, jQuery UI, Bootstrap, Foundation
4>各式各样的扩展: Editor, TableTools, FixedColumns ……
5>丰富多样的option和强大的API
6>支持国际化
7>超过2900+个测试单元
8>免费开源 ( MIT license )
官网不仅提供了各种版本免费的下载安装包,下面还有网友的技术讨论帖,开发中经常遇到的问题基本都可以找到解决方法。
中文使用手册:http://datatables.club/manual/
使用手册详细介绍了DataTables所支持的各种操作。
点击进入中文官网可以下载DataTables的一个包,如图:
其中的example为其一个样例,当时用DataTables时引入的是media文件夹,里面包括DataTables的css,js,image文件,然后在html文档中引入即可(作为JQuery插件,jQuery1.7或更高版本将与DataTables一起工作,)
如果想要DataTables运行,首先必须得有语义化的thead部分,其次:
一、将表格写死的方法
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="media/css/jquery.dataTables.css">
<script type="text/javascript" src="media/js/jquery.dataTables.js"></script>
<script type="text/javascript">
$(function () {
// body...
$("#example").dataTable()
})
</script>
</head>
<body>
<table id="example">
<thead>
<tr>
<th>名称</th>
<th>名称</th>
<th>名称</th>
<th>名称</th>
<th>名称</th>
<th>名称</th>
</tr>
</thead>
<tbody>
<tr>
<td>csdn</td>
<td>csdn</td>
<td>csdn</td>
<td>csdn</td>
<td>csdn</td>
<td>csdn</td>
</tr>
</tbody>
</table>
</body>
</html>
二、用数组的方法,进行