前言简述

DataTables是一个JavaScript类库，它操作HTML表格，改变表格CSS样式，增强表格功能使其更具有交互性。

DataTables依赖于JQuery类库。

入门示例

环境：DataTables 1.10.11  、JQuery 2.2.1

入门代码：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title>DataTable Learning</title>

        <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css" />

    </head>

    <body>

        <table id="table_id" class="display">

            <thead>

                <tr>

                    <th>Column 1</th>

                    <th>Column 2</th>

                </tr>

            </thead>

            <tbody>

                <tr>

                    <td>Row 1 Data 1</td>

                    <td>Row 1 Data 2</td>

                </tr>

                <tr>

                    <td>Row 2 Data 1</td>

                    <td>Row 2 Data 2</td>

                </tr>

            </tbody>

        </table>

        <!-- jquery.js 要先于 jquery.dataTables.min.js 引入 -->

        <script src="//cdn.bootcss.com/jquery/2.2.1/jquery.js" type="text/javascript"></script>

        <script src="//cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js" type="text/javascript"></script>

        <script type="text/javascript">

            $(function() {

                $('#table_id').DataTable();

            })

        </script>

    </body>

</html>

使用要点

1、首先引入DataTables必需的文件：jquery.dataTables.min.css 和 jquery.dataTables.min.js

2、因为DataTable依赖于JQuery，所以在引入DataTables的JS文件之前，还要先引入JQuery文件：jquery.js

3、定义普通的HTML表格：<table id="table_id">...</table>

4、使用DataTable初始化表格：$('#table_id').DataTable();

5、示例表格中有一个样式：class="display"，这是DataTables的CSS文件中的样式。

DataTables 入门使用的更多相关文章

  1. DataTables入门

    转载 https://blog.csdn.net/gfd54gd5f46/article/details/65938189

  2. DataTables学习：从最基本的入门静态页面，使用ajax调用Json本地数据源实现前端开发深入学习，根据后台数据接口替换掉本地的json本地数据，以及报错的处理地方，8个例子（显示行附加信息，回调使用api，动态显示和隐藏列...），详细教程

    一.DataTables  个人觉得学习一门新的插件或者技术时候,官方文档是最根本的,入门最快的地方,但是有时候看完官方文档,一步步的动手写例子,总会出现各种莫名其妙的错误,需要我们很好的进行研究出错 ...

  3. DataTables 控件使用和心得 (1) - 入门

    什么是DataTables DataTables是一个基于HTML/CSS/JavaScript的前端列表组件. 基于JQuery 开源并且免费(除特殊支持服务) 主要特色: 高性能,响应式,功能完整 ...

  4. Datatables快速入门开发--一款好用的JQuery表格插件

    博主是一个java后端程序员小白,前端技术会用但不精通,做后台的一些功能经常要涉及表格的展示,分页,搜索,排序等等一系列功能,在经历了一段时间的原始手段,开始接触并使用Datatables,一个jqu ...

  5. 11、ASP.NET MVC入门到精通——AspnetMVC分页

    本系列目录:ASP.NET MVC4入门到精通系列目录汇总 说起分页,这基本上是我们Web开发中遇见得最多的场景,没有之一,可即便如此,要做出比较优雅的分页还是需要技巧的.这里我先说一种ASP.NET ...

  6. WCF 入门（29）

    前言 最近工作比较忙,加了会班就不想再写东西了,就想洗洗睡. 但是这个视频真的不能断,不能像过去一样写了几集就停了. 现在公司在做一个MVC框架的项目,话说已经一年没有写MVC了,重新上手的感觉还可以 ...

  7. web前端基础知识及快速入门指南

    web前端基础知识及快速入门指南 做前端开发有几个月了,虽然说是几个月,但是中间断断续续的上课.考试以及其它杂七杂八的事情,到现在居然一直感觉自己虽然很多前端的知识很眼熟,却也感觉自己貌似也知识在门口 ...

  8. datatables表格

    datatables表格 并不是所有的后台开发都有美工和前端工程师来配合做页面,为了显示数据并有一定的美感,jQuery的DataTables插件对于像我这样的前端菜鸟来说真是雪中送炭,当然对于专业的 ...

  9. Spring boot入门（三）：SpringBoot集成结合AdminLTE(Freemarker)，利用generate自动生成代码，利用DataTable和PageHelper进行分页显示

    关于SpringBoot和PageHelper,前篇博客已经介绍过Spring boot入门(二):Spring boot集成MySql,Mybatis和PageHelper插件,前篇博客大致讲述了S ...

随机推荐

  1. nmap端口状态解析

    nmap端口状态解析 状态 说明 open 应用程序在该端口接收 TCP 连接或者 UDP 报文 closed 关闭的端口对于nmap也是可访问的, 它接收nmap探测报文并作出响应.但没有应用程序在 ...

  2. 线程与并发系列一：Lock、Monitor、UserSpinLock

    using System; using System.Collections.Generic; using System.Diagnostics; using System.Linq; using S ...

  3. 隐藏nginx 版本号信息

    为了安全,想将http请求响应头里的nginx版本号信息隐藏掉: 1. nginx配置文件里增加 server_tokens off; server_tokens作用域是http server loc ...

  4. 【最新图文教程】WinCE5.0中文模拟器SDK(VS2008)的配置

    http://www.blogbus.com/antiblood-logs/204402631.html 经过几天的查找,终于找到了一篇文章是讲VS2008 怎么集成wince5.0 的模拟器的,这里 ...

  5. ios开发中的C语言学习—— 结构体简介

    在开发过程中,经常会需要处理一组不同类型的数据,比如学生的个人信息,由姓名.年龄.性别.身高等组成,因为这些数据是由不同数据类型组成的,因此不能用数组表示,对于不同数据类型的一组数据,可以采用结构体来 ...

  6. javascript 搜索二叉树

    function Tree() { this.root = null; } Tree.prototype = { constructor: Tree, addItem: function(value) ...

  7. [iOS Xcode8]上传AppStore 无法构建版本 没有➕号

    最近iOS10出来了 Xcode也跟着升级到了8 想着App做个更新 于是修改好了代码打算上传新包 ,无奈总是发现构建不了新版本 经过各种蛋疼的查找.我列一下我的经验 1.如果是收费的App,那么是要 ...

  8. android 开发 - 使用okhttp框架封装的开发框架

    概述 在android开发中经常要访问网络,目前最流行的网络访问框架就是Okhttp了,然而我们在具体使用时,往往仍然需要二次封装.我使用Builder设计模式进行了封装形成oknet开源库. 介绍 ...

  9. Oracle10g新特性——正则表达式 - 转

    在进行查询时,有时候需要按照一定的特殊规则来查找某个字符串,比如,你可能需要查询第三位为5-8,最后四位为’8888’的所有电话.在9i之前,你可能需要写一个很复杂的条件:Select usernam ...

  10. C primer plus 练习题 第五章

    1. #include <stdio.h> #define MINU 60 int main() { int minute, hour, m; printf("请输入分钟:&qu ...