DataTable 是 jQuery 的一个插件。

代码上来吧，

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title>DataTable</title>

        <!-- 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>

    </head>

    <body>

        <pre>

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

            DataTables依赖于JQuery类库。

        </pre>

        <button id="addRow">添加一行</button>

        <table id="example" 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>

        <script type="text/javascript">

            $(document).ready(function() {

                var t = $('#example').DataTable();

                var counter = 1;

                $('#addRow').on( 'click', function () {

                    t.row.add( [

                        counter +'.1',

                        counter +'.2',

                        counter +'.3',

                        counter +'.4',

                        counter +'.5'

                    ] ).draw();

                    counter++;

                } );

            } );

        </script>

    </body>

</html>

1

DataTable学习笔记 - 01的更多相关文章

  1. 软件测试之loadrunner学习笔记-01事务

    loadrunner学习笔记-01事务<转载至网络> 事务又称为Transaction,事务是一个点为了衡量某个action的性能,需要在开始和结束位置插入一个范围,定义这样一个事务. 作 ...

  2. C++ GUI Qt4学习笔记01

    C++ GUI Qt4学习笔记01   qtc++signalmakefile文档平台 这一章介绍了如何把基本的C++只是与Qt所提供的功能组合起来创建一些简单的图形用户界面应用程序. 引入两个重要概 ...

  3. SaToken学习笔记-01

    SaToken学习笔记-01 SaToken版本为1.18 如果有排版方面的错误,请查看:传送门 springboot集成 根据官网步骤maven导入依赖 <dependency> < ...

  4. Redis：学习笔记-01

    Redis:学习笔记-01 该部分内容,参考了 bilibili 上讲解 Redis 中,观看数最多的课程 Redis最新超详细版教程通俗易懂,来自 UP主 遇见狂神说 1. Redis入门 2.1 ...

  5. PHP 学习笔记 01

    例子: 为什么要学PHP 主观原因: 前段时间在学校处理了毕业的一些事情,回到上海后开始了找工作的旅程.意向工作是WPF开发或者ASP.NET 作为后端的WEB开发. 陆陆续续一直在面试,其中有一家公 ...

  6. vue.js 2.0 官方文档学习笔记 —— 01. vue 介绍

    这是我的vue.js 2.0的学习笔记,采取了将官方文档中的代码集中到一个文件的形式.目的是保存下来,方便自己查阅. !官方文档:https://cn.vuejs.org/v2/guide/ 01. ...

  7. xml基础学习笔记01

    注意:刚刚看了网上对于XML中的标签,节点和元素?到底应该怎么表述?起初我也有这个疑惑,现在我的想法是:下面出现node的应称作节点,节点对象.element应称作元素,毕竟这更符合英文的本意.至于标 ...

  8. Ext.Net学习笔记01：在ASP.NET WebForm中使用Ext.Net

    Ext.Net是一个对ExtJS进行封装了的.net控件库,可以在ASP.NET WebForm和MVC中使用.从今天开始记录我的学习笔记,这是第一篇,今天学习了如何在WebForm中使用Ext.Ne ...

  9. FPGA-VHDL课堂学习笔记*01

    FPGA-VHDL课堂学习笔记 记录说明:本文档主要记录大学期间,老师FPGA授课课堂笔记. 代码语言:VHDL 编程软件:MAX+plus II FPGA硬件:FLE-843 03月05日  理论课 ...

随机推荐

  1. CS100.1x-lab0_student

    这是CS100.1x第一个提交的作业,是给我们测试用的.相关ipynb文件见我github.本来没什么好说的.我在这里简单讲一下,后面会更详细的讲解.主要分成5个部分. Part 1: Test Sp ...

  2. 使用JDBC连接MySQL数据库

    Java数据库连接(Java DataBase connectivity简称JDBC) 下载JDBC驱动:https://dev.mysql.com/downloads/connector/j/ Wi ...

  3. 十一、Django认证模块--Auth模块

    一.常规认证方法 我们学生管理之登录实现一文中已经了解了自己写一个登录逻辑的过程: 1.url配置 urlpatterns = [ url(r'^login/$', views.login), url ...

  4. 关于 Git SSH 使用的项目实践

    Git 是分布式的代码管理工具,远程的代码管理是基于 SSH 的,所以要使用远程的 git 则需要SSH的配置. 一.简述 访问 Git 仓库可以使用 SSH Key 的方式,首先需要生成 Key. ...

  5. iframe的简单使用方法

    1.父页面调用子页面的元素(a代表iframe的id或者class,b代表子页面) $('a').contents().find("b") 2.子页面调用父页面的元素(c代表父页面 ...

  6. 011 --Mysql中特定查询

    1.优化COUNT()查询 COUNT()可能是被大家误解最多的函数了,它有两种不同的作用,其一是统计某个列值的数量,其二是统计行数.统计列值时,要求列值是非空的,它不会统计NULL.如果确认括号中的 ...

  7. React Native移动开发实战-2-如何调试React Native项目

    在实际开发中,还有一个影响开发效率的重要因素:调试. 在1.4.3节中已经介绍了Enable Live Debugger的使用.本节来介绍另一个非常重要的调试选项:Debug JSRemotely选项 ...

  8. 笨办法学Python - 习题3: Numbers and Math

    目录 习题 3: 数字和数学计算 算术运算符 加分习题: 我的答案: 总结: 扩展: Python比较运算符 Python赋值运算符 Python位运算符 Python逻辑运算符 Python成员运算 ...

  9. dmesg命令详解

    基础命令学习目录 http://linux.cn/article-3587-1.html dmesg 命令的使用范例 下面我们展示一些最负盛名的‘dmesg’命令工具以及其实际使用举例.‘dmesg’ ...

  10. 【转】git乱码解决方案汇总

    git乱码解决方案汇 2012-11-04更新:官方的“终极”解决方案:msysGit1.7.10开始使用UTF-8编码保存文件名. 2011-10-24更新: 从一篇链接到本篇文章的文章(我对这篇文 ...