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>Datatabletitle>
<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 = '
';
$('body').append(content);
}
function unloading() {
$('.loading-img').remove();
}
script>
body>
html>
language是指定表格所使用的语言，上面指的是用中文（官方提供的json文件cdn）
serverSize是一个很重要的参数，这个参数表明，对表格的数据分页，以及排序等操作都放到服务端去完成，启用这个参数之后，其对ajax指定的地址发起请求会带很多参数，这里暂不做讲解，不明白的朋友可以下面回复。
ordering和searching分别指定表格是否启用排序和搜索
ajax指表格中的数据源，即一个URL地址
columns指定每一列的数据绑定，其中data就是绑定的名称
最下面两个on是事件，分别表示发起ajax请求之前和请求结束的回调函数。