DataTables从安装到入门的详细教程之一:DataTables介绍及安装

2023-05-16

DataTables介绍 

   Datatables是一款jquery表格插件。它是一个高度灵活的工具,可以将任何HTML表格添加高级的交互功能。

  • 分页,即时搜索和排序

  • 几乎支持任何数据源:DOM, javascript, Ajax 和 服务器处理

  • 支持不同主题 DataTables, jQuery UI, Bootstrap, Foundation

  • 各式各样的扩展: Editor, TableTools, FixedColumns ……

  • 丰富多样的option和强大的API

  • 支持国际化

  • 超过2900+个测试单元

  • 免费开源 ( MIT license ) 

中文官网:http://datatables.club/

    官网不仅提供了各种版本免费的下载安装包,下面还有网友的技术讨论帖,开发中经常遇到的问题基本都可以找到解决方法。

中文使用手册:http://datatables.club/manual/

    使用手册详细介绍了DataTables所支持的各种操作。

下载安装

    1.进入官网:http://datatables.club/ --> 点击最新版下载 (非常小只有2M多)


2.下载解压后目录结构:其中media文件夹包含了DataTables所依赖的文件


3.HTML编辑器:WebStorm强大的html编辑工具

    WebStorm的下载及安装详情请参考:WebStorm的下载及安装

4.导入media文件: 将media文件夹添加到WebStorm中创建工程下面


5.新建html文件:参考官网:http://datatables.club/manual/install.html   

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DataTables入门</title>

<!--第一步:引入Javascript / CSS (CDN)-->
<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.15/css/jquery.dataTables.css">

<!-- jQuery -->
<script type="text/javascript" charset="utf8" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

<!-- DataTables -->
<script type="text/javascript" charset="utf8" src="http://cdn.datatables.net/1.10.15/js/jquery.dataTables.js"></script>


<!--或者下载到本地,下面有下载地址-->
<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css" href="../media/css/jquery.dataTables.css">

<!-- jQuery -->
<script type="text/javascript" charset="utf8" src="../media/js/jquery.js"></script>

<!-- DataTables -->
<script type="text/javascript" charset="utf8" src="../media/js/jquery.dataTables.js"></script>
</head>

<body>
<!--第二步:添加如下 HTML 代码-->
<table id="table_id_example" class="display">
    <thead>
    <tr>
        <th>姓名</th>
        <th>性别</th>
        <th>年龄</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>李四</td>
        <td>男</td>
        <td>12</td>
    </tr>
    <tr>
        <td>赵倩</td>
        <td>女</td>
        <td>18</td>
    </tr>
    <tr>
        <td>德川家康</td>
        <td>男</td>
        <td>100</td>
    </tr>
    <tr>
        <td>妲己</td>
        <td>女</td>
        <td>22</td>
    </tr>
    </tbody>
</table>

<!--第三步:初始化Datatables-->
<script>
$(document).ready( function () {
$('#table_id_example').DataTable();
} );
</script>
</body>
</html>

6.动态效果:自动排序、分页、查找等功能


本篇博文简要的介绍了DataTables的安装使用,想要了解更多欢迎参考接下来的博文:DataTables从安装到入门的详细教程之二:DataTables的数据处理

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

DataTables从安装到入门的详细教程之一:DataTables介绍及安装 的相关文章

随机推荐

  • ARM:系统移植2

    1 u boot启动程序 1 获取uboot源码渠道 1 xff09 u boot官方 xff1a https ftp denx de pub u boot 2 xff09 开发板厂家 3 xff09 芯片厂家 4 xff09 主管领导 x
  • ChatGPT 相关资料收集

    本文地址 xff1a blog lucien ink archives 538 本文用来收集各种和生成式模型相关的内容 xff0c 由于 ChatGPT 是其代表 xff0c 也是会被写入人类历史进程的一个名字 xff0c 所以便用 Cha
  • Debian配置apache2以及CA

    1 安装apache2 apt install y apache2 systemctl start apache2 启动服务 修改apache2配置文件 cd etc apache2 cp sites available default s
  • Debian之配置squid代理缓存

    1 安装服务 apt install squid 2 修改配置 vim etc squid squid conf set nu 显示行号 1390 转到第1390行 第1391行 http access allow localhost 修改
  • JAVA判断回文数的两种方法

    回文数是指正序 xff08 从左向右 xff09 和倒序 xff08 从右向左 xff09 读都是一样的整数 目录 方法一方法二 方法一 通过 61 61 String valueOf 方法把整数转换为字符串 xff0c 再用toCharA
  • java设置Access-Control-Allow-Origin允许多域名访问

    对于前后端分离的项目难免会遇到跨域的问题 xff0c 在设置跨域的问题中有许多需要注意的事情 xff0c 如本次将要将的设置Access Control Allow Origin使其允许多域名请求 1 设置允许多域名访问最简单的方法是使用通
  • Debian10配置静态ip

    查看网卡 xff1a ip addr 修改网卡网络地址配置 xff1a vim etc network interfaces 配置模板 xff1a auto span class token punctuation span 网卡名 spa
  • Docker(四)Image、Container

    一 Image镜像 Docker把应用程序及其依赖 xff0c 打包在image文件里面 只有通过这个文件 xff0c 才能生成Docker容器 image文件可以看作是容器的模板 Docker根据image文件生成容器的实例 同一个ima
  • 报错:ModuleNotFoundError: No module named ‘PIL‘

    运行代码的时候报错 xff0c 如图所示 xff1a 表示python中没有配置pillow库 纠正的步骤 xff1a window 43 R xff0c 并且在框中输入cmd 进入python所在的目录下 xff0c cd appdata
  • Window10 Excel复制粘贴卡死

    Windows10 Excel复制粘贴卡死 excel复制大量数据有时卡死 xff0c 关机重启也没用 网上找了好多方法没效果 xff0c 突然想到windows10有个云剪切板功能 xff0c 就想关了试试没想到解决了 xff0c 哈哈哈
  • (Latex)期刊论文里的数学字符怎么打出来的?

    xff08 Latex xff09 期刊论文里的数学字符怎么打出来的 导入包试一试 by 今天不飞了 最近边查文献边写文章 xff0c 看到别人文章公式里的变量那叫一个花里胡哨 xff0c 再看看自己的 不能忍 xff0c 我也要 于是搜集
  • 面试:ARM篇

    1 IIC I2C 1 由日本飞利浦公司研发的一种 串行半双工的总线 2 采用两根线 SCL 和 SDA 特点 1 硬件比较简单 比较节约资源的一种总线 2 主要用于两个芯片之间的通信 也可以是多主机多从机 但基本不用 3 传输速度一般在4
  • 工作日志——首次通过k8s Elasticsearch获取新建Pod的日志缓慢的原因

    使用k8s Elasticsearch查看pod日志的时候偶尔会遇到这样的情况 xff0c 在创建完容器并运行后去查看日志的时候总是加载不出来 xff0c 需要等待十几秒甚至一分钟才能加载 我 有幸 被分配来解决这个问题 xff0c 经过一
  • WSL2 安装 Ubuntu-20.04 子系统CUDA(Win10和Win11)

    1 安装WSL的CUDA驱动 驱动下载地址 xff1a https developer nvidia com cuda wsl 选好你自己的显卡类型 下载完成后直接默认安装就行 2 安装WSL2 xff08 使用Ubuntu 20 04版本
  • ROS MELODIC ARM64的一些源

    默认注释了源码镜像以提高 apt update 速度 xff0c 如有需要可自行取消注释 deb https mirrors tuna tsinghua edu cn ubuntu ports bionic main restricted
  • 手写spring核心原理Version3

    上两篇博文手写spring核心原理Version1和手写spring核心原理Version2分别介绍了如何完成一个自动注入 以及如何用设计模式进行重构 xff0c 接下来这篇将仿照SpringMVC对参数列表以及methodMapping进
  • Netty Reactor线程模型

    前两篇博文分别介绍了Java 线程模型 xff1a BIO NIO和Reactor线程模型 xff0c 本篇博文将介绍Reactor线程模型在Netty中的实际应用 Netty模型 Netty模型的简单介绍 Netty 主要基于主从 Rea
  • JVM:类的加载过程

    类的加载过程 类的加载过程整体可以分为五个阶段 xff1a 加载 验证 准备 解析 初始化 xff0c 其中验证 准备和解析又被概括为链接 加载 通过一个类的全限定名获取定义此类的二进制字节流 xff1b 将这个字节流所代表的的静态存储结构
  • Hive On Tez 进度条不显示问题修复

    问题描述 用Hive客户端使用beeline命令执行SQL的时候 xff0c 有些情况下会显示进度条 xff0c 有些情况不显示进度条 显示进度条的情况 设置默认执行引擎为Tez lt property gt lt name gt hive
  • DataTables从安装到入门的详细教程之一:DataTables介绍及安装

    DataTables介绍 Datatables是一款jquery表格插件 它是一个高度灵活的工具 xff0c 可以将任何HTML表格添加高级的交互功能 分页 xff0c 即时搜索和排序 几乎支持任何数据源 xff1a DOM xff0c j