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

最新推荐文章于 2024-06-06 16:19:15 发布

不大好不大好

最新推荐文章于 2024-06-06 16:19:15 发布

阅读量3.2k

点赞数 2

分类专栏： JQuery 我不信学不会JavaScript 文章标签： jquery html javascript

本文链接：https://blog.csdn.net/weixin_44707049/article/details/120570862

版权

介绍

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"></script>

最低0.47元/天解锁文章

不大好不大好

关注

2
点赞
踩
15

收藏

觉得还不错? 一键收藏
0
评论
【JQuery】Datatables插件的基本使用方法

介绍Datatables是一款jquery表格插件。它是一个高度灵活的工具，可以将任何HTML表格添加高级的交互功能。基本使用既然是JQuery的插件，那么在引入之前肯定是先引入JQ库。JQuery库下载地址https://jquery.com/download/JQuery的百度CDNhttps://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js然后再引入datatables的CSS和JS文件Datatables下载地址http://
复制链接

扫一扫