概述：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請求之前和請求結束的回調函數。