【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>Datatablestitle>
		
		<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>19td>
				tr>
				<tr>
					<td>小红td>
					<td>td>
					<td>15td>
				tr>
			tbody>
		table>
		
		<script src="../MobileReview/plugin/jquery-3.6.0.js" type="text/javascript" charset="utf-8">script>

你可能感兴趣的:(JQuery,jquery,html,javascript)