DataTable初次使用笔记
概述：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请求之前和请求结束的回调函数。
