Bootstrap

【JQuery】Datatables插件的基本使用方法

介绍

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">
;