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. floodlight路由机制分析

    SDN的出现可以使得各种复杂的路由协议从原本的Device OS中剥离出来,放在SDN Controller中,Controller用一种简单的协议来和所有的Router进行通信,就可以获得网络拓扑, ...

  2. #6472. 「ICPC World Finals 2017」难以置信的任务 Mission Improbable

    可以简化一下问题,假设Patrick把箱子都拿走但是原来有箱子的位置留下一个,现在要放箱子使得每行每列最大值都满足,最少放多少个. 设第\(i\)行的最大值是\(H(i)\),第\(i\)列的是\(W ...

  3. pycharm如何显示工具栏

    1.没有工具栏的效果图如下: 2.在view中找到Toolbar打上勾即可显示: 3.工具栏设置成功显示效果图如下: 3.如何显示一个类或方法所在的文件,以及该文件下的所有方法,可以快速定位到该行

  4. 利用BlockingCollection实现生产者和消费者队列，实现写文本

    最近开发几个小项目,需要把结果写到txt文件里面,并且按照时间进行分文件,由于对于效率要求较高,所以采用 生产者和消费者 模型来进行写出文本,线程中只需要添加队列就立即返回,而不需要等待写文件的时间 ...

  5. mvn本地部署命令行

    ---创建mvn项目 mvn archetype:generate 运行结果如下: ---调试mvn仓库 mvn archetype:generate –X 运行结果如下: ---创建依赖 mvn a ...

  6. mybatis学习(一)-------XML 映射配置文件详解

    XML 映射配置文件 MyBatis 的配置文件包含了会深深影响 MyBatis 行为的设置(settings)和属性(properties)信息.文档的顶层结构如下: configuration 配 ...

  7. APP性能测试中的几个重要概念

    转载一篇文章,关于app性能测试的几个概念,对于想要接触app测试的朋友或许有些帮助. 我们在使用各种 App 的时候基本会关注到:这款软件挺耗流量的?运行起来设备掉电有点快嘛?切换页面的时候还会有卡 ...

  8. 「功能笔记」Linux常用Shell命令（终端命令）备忘录

    长期更新,空置.缺漏的部分会逐渐补上.未指明时,均为GNU版本. 文件命令 基础操作 ls 默认显示非隐藏文件.以文件名进行排序.文件名有颜色(蓝色文件夹.白色一般文件.绿色可执行文件). Cheat ...

  9. angularjs中audio/video 路径赋值问题

    之前解决这个问题都是通过js的attr赋值解决的,但是也一直不明白为什么audio直接在HTML中赋值报错.解决方法就是通过添加$sce过滤效果 app.filter("trustUrl&q ...

  10. Qt-网易云音乐界面实现-3 音乐名片模块的实现

    这个模块其实我是不知道该叫什么的,暂时就叫做音乐名片模块吧,这可以看到,这个模块简单的显示以下信息. 1. 歌曲名称 2. 歌曲歌唱者 3. 歌曲封面 4. 喜欢歌曲的按钮 5. 分享歌曲的按钮 6. ...