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介绍及安装 的相关文章

  • 获取 SQL 外键时遇到问题,因为它显示错误 1364“字段没有默认值”? [复制]

    这个问题在这里已经有答案了 刚刚接触 SQL 的学生 我知道类似的问题已经在这里被问过多次 但我似乎无法弄清楚问题出在哪里 我正在做一个记录血压的基本项目 我的想法是 以下代码将初始化用户表 以跟踪登录者 和读数表 血压读数 的架构 CRE
  • RMarkdown 文档中的条件格式表

    例如 我可能想使用以下规则为单元格着色 编辑为不平凡 如果 gt 4 则呈蓝色 如果 3 5 则不填充 如果 gt 3 且 如果 使用 RMarkdown knit 创建具有条件格式的表格 https stackoverflow com q
  • 如何在使用 jQuery 添加新行时刷新简单的数据表

    我认为这个很简单 但我找不到与 ajax 加载的数据或数组中提供的数据无关的参考 我在现有的 HTML 表上使用 DataTables 基本代码如下 table wizard dataTable lengthChange false iDi
  • jquery datatables - 从 json 获取列

    In jquery Datatables is it possible to define columns with a server side script I need something like this 必须从服务器加载带有日期的
  • 从上传的 csv 数据创建 dataTable 列定义

    M 尝试从上传的 csv 文件创建数据表 我面临的唯一问题是定义表列标题 目前我已经这样做了 手动定义标头 var table example DataTable columns title Number data Number title
  • jQuery 数据表隐藏头部

    如果表没有任何数据 我想隐藏数据表标题 oTable topics showTopics dataTable bLengthChange false bStateSave true iDisplayLength 12 bScrollColl
  • 使用 TABS 时 DataTable.js 无法正确加载

    我使用 DataTables js 生成表 非常棒 运行良好 我想将选项卡添加到我的 页面 但似乎当在主选项卡以外的其他选项卡上使用 DataTables 时 它不会加载所有内容 First Tab 2nd Tab 以下是添加了 DataT
  • 在客户端处理模式下使用 jQuery DataTables 对字母数字数据进行排序

    所以我有一个包含字母数字值的表 例如 8980 1100 A1100 BA200 我希望它首先以数字顺序方式对其进行排序 然后以字母数字方式进行排序 例如 1000 8980 A1100 BA200 在这里找到了一些帮助 但不完全是我正在寻
  • 从 search.push 函数中的 DataTables 获取“数据排序”正交值

    我正在循环其中的行 fn dataTable ext search push函数根据许多条件选择一些行 我正在设置一些值TD的表称为正交 https datatables net manual data orthogonal data数据
  • 使用数据表页脚回调的多列总数

    我正在尝试实现一个包含多个包含数值的列的数据表 我想在表页脚中显示每列的总和 我从中得到了一些灵 感here https datatables net examples advanced init footer callback html
  • jquery数据表跨页行数

    我正在为我的 HTML 表使用 jQuery DataTables 插件 有没有办法跨页获取我的表格中的行数的行数 例如 如果我有70我的表中的行 比方说50其中显示在第一页上 并且20在第二页 有没有办法得到计数70 我已经尝试了这篇文章
  • 未捕获的异常:数据表编辑器 - 不允许远程托管代码

    我正在尝试使用 Datatables 使用 datatableseditor 来实现 CRUD 操作 但是我收到错误消息 1 未捕获的异常 数据表编辑器 不允许远程托管代码 请参见http editor datatables net有关如何
  • 如何检索 JQuery 数据表的排序状态

    我对 JQuery Datatables 还很陌生 我正在尝试检索有关数据表的两个信息 当前正在对哪个列索引进行排序 也称为选择 排序顺序 升序或降序 不知道我应该如何解决这个问题 使用 jquery 查找列索引 或者 Datatables
  • 如何居中对齐数据表标题

    我是数据表新手 当我制作表格标题时 它总是左对齐 如何将标题设置为居中对齐 我已阅读 datatables net manual styling classes 和 datatables net reference option colum
  • 如何更改数据表中标题单元格的内容?

    我正在使用数据表 http datatables net plugin 在我的可排序列上 我想用按钮替换列文本 但是这样做 oSettings aoColumns i nTh text 我可以检索相应列的文本 但是 oSettings ao
  • DataTables:从表过滤器中创建 url 查询字符串

    当我在表中搜索或单击过滤器时 我想从表中进行 url 查询以将此 url 共享给某人 有人知道这怎么可能吗 这是我的代码 example dataTable aLengthMenu 10 25 50 100 1 10 25 50 100 A
  • 如何在数据表角度中基于 JSON 动态填充表值?

    我在用着Angular 数据表 https l lin github io angular datatables 我需要能够根据返回的数据动态创建表 换句话说 我不想指定列标题 Example json数据 id 2 city Baltim
  • r 闪亮下载过滤数据表(DT)

    我正在尝试做一个shiny应用程序下载过滤后的Datatable 过滤与search 通过删除行进行过滤delete button 下载部分按预期工作 问题 当我第一次使用数据表中的搜索区域进行过滤时 如果我使用按钮删除一行 它会重置第一个
  • 使用换行符将值导出到 Excel 中的单个单元格中。 jQuery 数据表

    我使用 jQuery DataTables 成功将 HTML 表格从 Web 应用程序导出到 Excel 然而 某一特定列的值包含换行符和制表符 我成功地通过用以下内容替换新行 n 和制表符 t 在 HTML 表格上正确显示数据 br 和
  • 选择 R 中的数据表中隐藏时(在绿色加号下方)列的显示顺序

    Context 使用 DataTables 库制作交互式表格时 当屏幕宽度对于列的数量和宽度来说太窄时 列将隐藏在绿色 号下 我有一个非常宽的表格 有 20 多列 其中一些内容非常冗长 因此某些列在所有屏幕宽度下总是隐藏的 每次隐藏新列时

随机推荐

  • 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