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

  • 数据表自动切换页面

    我正在尝试自动在数据表页面之间切换 但似乎无法使其正常工作 我要么得到一个长时间运行的脚本 如果我尝试添加延迟 则会收到以下错误 table page draw delay 不是函数 下面是我正在使用的代码 document ready f
  • 按名称按字母顺序排序在数据表中不起作用

    在这里 我从控制器中获取了数据 一切都很好 根据字母顺序 但在数据表中它不是我想要得到的 意味着查看时按字母顺序排列 这里所有数据默认按降序排列 aaSorting 0 desc 我需要它根据名称字段按字母顺序排序 我附上了一张快照以供更多
  • 闪亮:无法在闪亮数据表中设置列宽

    我对 Shiny 和 DataTables 还很陌生 所以这可能是一个愚蠢的问题 由于某种原因我无法更改列宽 我试过 output table lt DT renderDataTable withProgress message Compi
  • 带参数的 DataTables ajax.reload()

    我正在使用数据表服务器端在 Angular2 项目中 我尝试在进行更改后重新加载表 并且我想通过 AJAX 将这些更改作为 POST 中的参数传递 问题是 DataTables 总是得到options来自初始化的对象 而不是更新版本新参数
  • jQuery Datatable:标题和搜索在同一行

    目前我的 jQuery 数据表如下所示 我希望历史标题和搜索栏位于同一行 我已经实现了标题和表格 如下所示 h2 History h2 table class table style width 100 thead tr tr thead
  • 如何使用 jQuery UI 调整 datatables.js 列的大小

    我在 stackoverflow 中找到了调整表列大小的解决方案 jQuery UI 使用表格和 colspan 调整大小 https stackoverflow com questions 18812432 jquery ui resiz
  • jQuery DataTable - 搜索一列下拉列表

    我有一个简单的 jQuery 数据表 其中包含 4 列 其中一列是下拉列表 table tfoot tr th class searchBox Vendor Location th th class searchBox Currency t
  • 当用户单击后退按钮时让 DataTables 保持其状态(没有 stateSave 选项)

    我在 Chrome 和 Edge 中遇到的问题 Go to https datatables net examples basic init zero configuration html https datatables net exam
  • 如何使用 renderDT 强制使用科学记数法

    我想要数值的行为DT表与表中的相同print使用时的输出 options scipen 1 options digits 3 cars 1000000 But whatever are the options it seems that D
  • jQuery DataTables 多选列过滤器

    我想要得到的是类似于 Excel 的针对各个 DataTables 列的多条件过滤 我在 stackoverflow 上遇到了一些与该主题相关的主题 但这些主题似乎都没有实现我正在寻找的内容 到目前为止 我只有样本表 我很感激任何有关下一步
  • 通过 React App 的数据表按钮

    在 React 中工作时 我在尝试添加 Excel 导出按钮时遇到了问题 我认为它与导入有关 但在这方面我在网上找不到太多与 React 和 DataTables net 相关的帮助 我只希望用户能够下载到 Excel 这些是我与 jque
  • 刷新 Ajax 成功的数据表

    我正在使用数据表和 jquery 对话框 总的来说 我有 3 个表格和 3 个数据表 我的脚本运行良好 但我遇到的问题是在 ajax 保存成功时更新正确的数据表 它甚至不必是正确的对应表 它可以更新 3 个表单保存中任何一个的所有 3 个表
  • 动态 fnAddData 时,数据表显示“正在处理...”标签

    我有一个函数可以动态地将数据添加到数据表中 这是函数 function fnClickAddRow for i 0 i lt 10000 i example dataTable fnAddData giCount 1 giCount 2 g
  • 禁用除第一列之外的每一列的排序

    我目前正在将数据表用于自定义系统 我想对除第一列之外的每一列禁用排序 我尝试使用以下代码 当我添加用逗号分隔的值时 它工作正常 aoColumnDefs bSortable false aTargets 1 2 3 4 但我的表列号因每个单
  • 从数据表中获取隐藏行内容并将其与表单一起提交

    我遇到了一个问题 现在它占用了我的时间 我有一个包含 7 条记录的表 例如 该表具有 input 和 textarea 元素 用户可以在其中输入内容 现在 分页的值为每页 5 条记录 我有两个页面 用户在评论部分输入数据 单击分页中的 下一
  • 当标题顺序更改时,带有状态保存的数据表过滤器会导致问题

    我有一个html页面和一些 javascript 代码 下面是我的工作html table class table table hover thead tr th class color white Employee ID th th cl
  • 从上传的 csv 数据创建 dataTable 列定义

    M 尝试从上传的 csv 文件创建数据表 我面临的唯一问题是定义表列标题 目前我已经这样做了 手动定义标头 var table example DataTable columns title Number data Number title
  • 如何使用 DataTables jquery 插件按日期排序?

    我正在使用 datatables jquery 插件并希望按日期排序 我知道他们有一个插件 但我找不到从哪里实际下载它 http datatables net plug ins sorting http datatables net plu
  • 数据表 - 从 AJAX 源过滤数据

    我有一个数据表 正在从 api 获取数据 现在我的状态是活动的 非活动的 如果标志是活动的 那么我需要在数据表中显示 否则我不应该显示过期的 这是我的fiddle https jsfiddle net lakshmipriya001 qLp
  • 是否有设置可以停止在数据表中显示“表中没有可用数据”?

    最初我的表没有数据 我得到 表中没有可用数据 这是预期的功能 我不想创建任何文本或行 因为我将根据用户操作通过 Ajax 填充表 是否有设置可以停止表中该行的显示 我好像找不到一个此代码有效 但第一行显示 表中没有可用数据 这是 jQuer

随机推荐

  • 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