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

使用：

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

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

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

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

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

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

调用DataTable提供的初始化方法

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

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

在table标签中加入如下代码

<table id="mTable">

    <thead>

        <tr>

            <td>姓名</td><td>年龄</td><td>性别</td>

        </tr>

    </thead>

</table>

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

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

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

    <title>Datatable</title>

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

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

    <style type="text/css">

        .loading-img {

            position: fixed;

            left: 50%;

            top: 50%;

        }

    </style>

</head>

<body>

<table id="mTable">

    <thead>

        <tr>

            <td>姓名</td><td>年龄</td><td>性别</td>

        </tr>

    </thead>

</table>

<script type="text/javascript">

    $('#mTable').dataTable({

        language: {

            url: '//cdn.datatables.net/plug-ins/1.10.13/i18n/Chinese.json'

        },

        serverSide: true,

        ordering: false,

        searching: false,

        ajax: '/data.php',

        columns: [

            {data: 'name', title: '姓名'},

            {data: 'age', title: '年龄'},

            {data: 'sex', title: '性别'}

        ],

        // 仅仅在表格第一次初始化完成的时候调用

        initComplete: function( settings, json ) {

            alert('initComplete');

        },

        // 表格HTML画完完的时候触发，在initComplete之前

        drawCallback: function(settings) {

            alert( 'drawCallback' );

        },

        // 每画完一行就调用一次本方法

        "rowCallback": function(row, data, index) {

            console.log(data, row);

        }

    }).on('preXhr.dt', function(e, settings, data) {

        loading();

    }).on('xhr.dt', function(e, settings, json, xhr) {

        unloading();

    });

    function loading() {

        var content = '<img class="loading-img" src="/loading178.gif" />';

        $('body').append(content);

    }

    function unloading() {

        $('.loading-img').remove();

    }

</script>

</body>

</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. 【codeforces】【比赛题解】#937 CF Round #467 (Div. 2)

    没有参加,但是之后几天打了哦,第三场AK的CF比赛. CF大扫荡计划正在稳步进行. [A]Olympiad 题意: 给\(n\)个人颁奖,要满足: 至少有一个人拿奖. 如果得分为\(x\)的有奖,那么 ...

  2. vim加密文件

    一.加密文件内容 vim gt-1.sh 输入:X 注意是大写的X 输入密码 然后,保存 再次访问,需要输入密码 如果输入密码错误,内容显示为乱码 用cat或more查看文件内容,显示为乱码:用vi重 ...

  3. [NOI2014]购票 「树上斜率优化」

    首先易得方程,且经过变换有 $$\begin{aligned} f_i &= \min\limits_{dist_i - lim_i \le dist_j} \{f_j + (dist_i - ...

  4. mysqli链接数据库示例代码

    $mysqli = new mysqli("localhost", "数据库用户名", "数据库密码", "数据库名称" ...

  5. 从一个局长使用BS系统的无奈看测试点

    今天我点名买了个B/S系统,听说只要有浏览器就能用.我最讨厌装客户端了,用浏览器就是方便啊. 下面就是我使用这个系统碰到的麻烦事: 我登录失败的时候没有任何提示,这没什么,反正提示也只是说失败…… 进 ...

  6. Windows 10安装MongoDB（安装&启动）

    Windows 10家庭中文版,MongoDB 3.6.3, 最近在学习Scrapy,可以却从未将scraped data存储到数据库中.在看过一些文档后,Scrapy会和MongoDB结合使用(还有 ...

  7. python基础-实现进度条功能,for和yield实现

    实现进度条功能 方法一:简单FOR实现打印进度条功能 for i in range(10): print("#",end="",flush=True) time ...

  8. js权威指南---学习笔记01

    1.当函数赋值给对象的属性时,就变为了方法:2.被零整除不报错,只会返回无穷大(Infinity)或者负无穷大.例外:零除以零等于非数字(NaN).3.NaN与任何值都不相等! 4.Javascrip ...

  9. No.7 selenium学习之路之Alert弹窗

    Alert弹窗 弹窗是用工具选不到的~ 切换到alert driver.switch_to_alert() 新的语法:driver.switch_to.alert 注:新的语法不需要后面加括号 打印a ...

  10. 题解 UVA10048 【Audiophobia】

    这是一道很神奇的题 什么都不卡,就卡c++11(所以评测时要换成c++). 怎么说呐,其实就是跑一个弗洛依德,求图上两点间最大权值最小的路径,输出最大权值最小. P.S.本题n很小,直接floyd变形 ...