概述：DataTable是一个jQuery插件，用于生成HTML表格，功能很强大。

使用：

使用DataTable需要引入jQuery，因为他是基于jQuery的插件，然后引入DataTable的js文件和css文件即可，下面贴出该文章编写时使用的cdn。

  1. <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css">
  2. <script type="text/javascript" src="//cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
  3. <script type="text/javascript" src="//cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>

然后我们需要在页面中定义一个table标签，并为其指定一个id

  1. <table id="mTable"></table>

调用DataTable提供的初始化方法

  1. $('#mTable').dataTable();

现在DataTable已经创建完成了，不过我们好像什么都看不到，因为没有表格数据嘛，当然是一片空白，接下来我们为这个表格加上一个表头

在table标签中加入如下代码

  1. <table id="mTable">
  2.     <thead>
  3.         <tr>
  4.             <td>姓名</td><td>年龄</td><td>性别</td>
  5.         </tr>
  6.     </thead>
  7. </table>

再刷新网页是不是就能看到一个表格的效果了？下面就是对表格进行各种配置了，代码全部贴出来，一个一个解释

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css">
  6.     <title>Datatable</title>
  7.     <script type="text/javascript" src="//cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
  8.     <script type="text/javascript" src="//cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
  9.     <style type="text/css">
  10.         .loading-img {
  11.             position: fixed;
  12.             left: 50%;
  13.             top: 50%;
  14.         }
  15.     </style>
  16. </head>
  17. <body>
  18. <table id="mTable">
  19.     <thead>
  20.         <tr>
  21.             <td>姓名</td><td>年龄</td><td>性别</td>
  22.         </tr>
  23.     </thead>
  24. </table>
  25.  
  26. <script type="text/javascript">
  27.     $('#mTable').dataTable({
  28.         language: {
  29.             url: '//cdn.datatables.net/plug-ins/1.10.13/i18n/Chinese.json'
  30.         },
  31.         serverSide: true,
  32.         ordering: false,
  33.         searching: false,
  34.         ajax: '/data.php',
  35.         columns: [
  36.             {data: 'name', title: '姓名'},
  37.             {data: 'age', title: '年龄'},
  38.             {data: 'sex', title: '性别'}
  39.         ],
  40.  
  41.         // 仅仅在表格第一次初始化完成的时候调用
  42.         initComplete: function( settings, json ) {
  43.             alert('initComplete');
  44.         },
  45.  
  46.         // 表格HTML画完完的时候触发，在initComplete之前
  47.         drawCallback: function(settings) {
  48.             alert( 'drawCallback' );
  49.         },
  50.  
  51.         // 每画完一行就调用一次本方法
  52.         "rowCallback": function(row, data, index) {
  53.             console.log(data, row);
  54.         }
  55.     }).on('preXhr.dt', function(e, settings, data) {
  56.         loading();
  57.     }).on('xhr.dt', function(e, settings, json, xhr) {
  58.         unloading();
  59.     });
  60.  
  61.     function loading() {
  62.         var content = '<img class="loading-img" src="/loading178.gif" />';
  63.         $('body').append(content);
  64.     }
  65.  
  66.     function unloading() {
  67.         $('.loading-img').remove();
  68.     }
  69. </script>
  70. </body>
  71. </html>

language是指定表格所使用的语言，上面指的是用中文（官方提供的json文件cdn）

serverSize是一个很重要的参数，这个参数表明，对表格的数据分页，以及排序等操作都放到服务端去完成，启用这个参数之后，其对ajax指定的地址发起请求会带很多参数，这里暂不做讲解，不明白的朋友可以下面回复。

ordering和searching分别指定表格是否启用排序和搜索

ajax指表格中的数据源，即一个URL地址

columns指定每一列的数据绑定，其中data就是绑定的名称

最下面两个on是事件，分别表示发起ajax请求之前和请求结束的回调函数。

DataTable初次使用笔记的更多相关文章

  1. DataTable To List<T> DataTable Linq学习笔记

    LINQ 查询适用于实现的数据源 IEnumerable<T>接口或System.Query.IQueryable接口. DataTable类默认是没有实现以上接口的. 所以要在DataT ...

  2. shellcode 初次使用笔记

    winXP SP3 环境 (xp环境默认没开启栈不可执行机制,比较方便破解,如果已开启了,请自行百度如何关闭) dig.exe 目标文件 x86dbg调试工具 python 环境 打开准备好的目标软件 ...

  3. 20145330《Java学习笔记》第一章课后练习8知识总结以及IDEA初次尝试

    20145330<Java学习笔记>第一章课后练习8知识总结以及IDEA初次尝试 题目: 如果C:\workspace\Hello\src中有Main.java如下: package cc ...

  4. Spring Cloud学习笔记--Spring Boot初次搭建

    1. Spring Boot简介 初次接触Spring的时候,我感觉这是一个很难接触的框架,因为其庞杂的配置文件,我最不喜欢的就是xml文件,这种文件的可读性很不好.所以很久以来我的Spring学习都 ...

  5. 路由其实也可以很简单-------Asp.net WebAPI学习笔记（一） ASP.NET WebApi技术从入门到实战演练 C#面向服务WebService从入门到精通 DataTable与List<T>相互转换

    路由其实也可以很简单-------Asp.net WebAPI学习笔记(一)   MVC也好,WebAPI也好,据我所知,有部分人是因为复杂的路由,而不想去学的.曾经见过一位程序猿,在他MVC程序中, ...

  6. Django笔记-MySQL初次使用设置

    以下为个人学习时的笔记,正在完善中........... [1]启动服务 [root@bogon /]# service mysqld start正在启动 mysqld: [确定] [root@bog ...

  7. 初次使用InstallShield笔记

    公司的产品需要打包发布,以前一直没打包,打包方法的学习交给了我 下面的内容是我研究过后的,通过回忆写的笔记.由于不熟悉,可能会有错误或者是笨办法,希望高手指正,感激不尽. 有些东西是什么,以及是什么意 ...

  8. 初次使用Docker的体验笔记

    一.前言 Docker容器已经发布许久,但作为一名程序员如今才开始接触,实在是罪过--        在此之前,我还没有对Docker进行过深入的了解,对它的认识仍停留在:这是一种新型的虚拟机.这样的 ...

  9. CUBRID学习笔记 32 对net的datatable的支持 cubrid教程

    在net的驱动中实现理一下的支持 DataTable data populate Built-in commands construct: INSERT , UPDATE, DELETE Column ...

随机推荐

  1. crond检查服务状态

    代码如下: * */1 * * * /etc/init.d/ntpd status;if [ $? -ne 0 ];then /etc/init.d/ntpd start; fi

  2. Linux内核跟踪之ring buffer的实现【转】

      转自:http://blog.chinaunix.net/uid-20543183-id-1930845.html ---------------------------------------- ...

  3. Android Bander设计与实现 - 设计

    Binder Android IPC Linux 内核 驱动 摘要 Binder是Android系统进程间通信(IPC)方式之一.Linux已经拥有管道,system V IPC,socket等IPC ...

  4. 二十一、springboot之定制URL匹配规则（项目中遇到的问题：get方式传参，带有小数点，被忽略）

    一.问题描述: get方式传参,在传送价格,积分时(带有小数点),debug后台微服务接受到的参数,却不带小数点,如:price是0.55,后台接受后却是0 二.解决 在WebConfiguratio ...

  5. 四、Springboot Debug调试

    描述: 在使用maven插件执行spring-boot:run进行启动的时候,如果设置的断点进不去,要进行以下的设置. 1.添加jvm参数配置 在spring-boot的maven插件加上jvmArg ...

  6. 三、springboot热部署

    1.spring-boot-devtools 实现热部署 spring-boot-devtools 最重要的功能就是热部署.它会监听 classpath 下的文件变动,并且会立即重启应用. <d ...

  7. 基于gRpc的远程服务框架

    作为一个新搭建的软件团队,底层技术尤为重要.为了以后更好的面向不同的项目需求,满足不断变化的需求,决定着手搭建一套RPC系统.为了更好的兼容以后部门其他语言的使用,选择了开源框架gRpc. gRpc ...

  8. 简单计算器的C实现-函数指针，main函数传参

    /** 程序功能:简单计算器,实现加减乘除平方* 作者版本日期:2015.11.08 zhouhb OK* 源代码:李明 <新概念C语言培训>第33集 C语言Shell命令解释器的实现* ...

  9. [洛谷P2783]有机化学之神偶尔会做作弊

    第一次做出来黑题祭 虽然感觉难度其实并不到黑题的难度 题解: 其实这道题并没用什么特别的知识,只是Tarjan求双联通分量和LCA的结合. 所以,我们可以很显然的发现(如此恶劣的词汇,逃 这道题其实就 ...

  10. MySQL学习笔记：while循环

    思考:while循环是否只能使用在存储过程或者存储函数之中,不能直接在查询语句中使用? ———— 循环一般在存储过程和存储函数中使用. 直接放几个例子: 例一: 1.创建存储过程 DELIMITER ...