介绍
Datatables是一款jquery表格插件。它是一个高度灵活的工具,可以将任何HTML表格添加高级的交互功能。
基本使用
既然是JQuery的插件,那么在引入之前肯定是先引入JQ库。
JQuery库下载地址
https://jquery.com/download/
JQuery的百度CDN
https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js
然后再引入datatables的CSS和JS文件
Datatables下载地址
http://datatables.club/
下载会得到一个压缩包,解压后就能得到DT的各种CSS文件和JS文件,按需引入即好。我们先以最简单的最基本的为例。
1.创建一个新的HTML文件,引入基本的文件,写好基本表格的框架
test.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Datatables</title>
<!-- 引入Datatable样式文件 -->
<link rel="stylesheet" type="text/css" href="../MobileReview/plugin/DataTables-1.10.21/media/css/jquery.dataTables.css"/>
</head>
<body>
<table id="example" border="1px">
<thead>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</thead>
<tbody>
<tr>
<td>小明</td>
<td>男</td>
<td>19</td>
</tr>
<tr>
<td>小红</td>
<td>女</td>
<td>15</td>
</tr>
</tbody>
</table>
<!-- 引入Jquery文件 -->
<script src="../MobileReview/plugin/jquery-3.6.0.js" type="text/javascript" charset="utf-8">