DataTables是一款非常简单的前端表格展示插件，它支持排序，翻页，搜索以及在客户端和服务端分页等多种功能。官方介绍：

DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, based upon the foundations of progressive enhancement, and will add advanced interaction controls to any HTML table.

它的数据源有很多种：主要有HTML (DOM)数据源，Ajax数据源，JavaScript数据源以及服务器端数据源。这里分别介绍一下这四种数据源的使用。

一、HTML (DOM) sourced data

　　HTML表格数据如下：

<table id="example" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
            </tr>
            <tr>
                <td>Garrett Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>63</td>
                <td>2011/07/25</td>
                <td>$170,750</td>
            </tr>
   </tbody>
</table>

然后加入JavaScript代码：

$(document).ready(function() {
    $('#example').dataTable();
} );

二、Ajax sourced data

　　Datatable可以解析来自Ajax的Json数据：
HTML代码如下：

<table id="example1" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Extn.</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
 
        <tfoot>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Extn.</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </tfoot>
</table>

JavaScript代码：

$(document).ready(function() {
    $('#example1').dataTable( {
        "ajax": '/wp-content/themes/yusi2.0/dataTable/arrays.txt'
    } );
} );

三、Javascript sourced data

　　在很多时候，我们的数据都是动态生成的，dataTable支持读取和解析JavaScript 中的数组。我们只需要将 JavaScript 数组传递给dataTable的data属性即可。
JavaScript代码：

<table cellpadding="0" cellspacing="0" border="0" class="display" id="example2"></table>
var dataSet = [
    ['Trident','Internet Explorer 4.0','Win 95+','4','X'],
    ['Trident','Internet Explorer 5.0','Win 95+','5','C'],
    ['Trident','Internet Explorer 5.5','Win 95+','5.5','A'],
    ['Trident','Internet Explorer 6','Win 98+','6','A'],
    ['Trident','Internet Explorer 7','Win XP SP2+','7','A'],
    ['Trident','AOL browser (AOL desktop)','Win XP','6','A'],
    ['Gecko','Firefox 1.0','Win 98+ / OSX.2+','1.7','A'],
    ['Gecko','Firefox 1.5','Win 98+ / OSX.2+','1.8','A'],
    ['Gecko','Firefox 2.0','Win 98+ / OSX.2+','1.8','A'],
    ['Gecko','Firefox 3.0','Win 2k+ / OSX.3+','1.9','A'],
    ['Gecko','Camino 1.0','OSX.2+','1.8','A'],
];

$(document).ready(function() {
    $('#example2').dataTable( {
        "data": dataSet,
        "columns": [
            { "title": "Engine" },
            { "title": "Browser" },
            { "title": "Platform" },
            { "title": "Version", "class": "center" },
            { "title": "Grade", "class": "center" }
        ]
    } );   
} );

四、Server-side processing

　　这种是最常见的数据来源，我们在服务器端生成需要的数据（一般都是Json格式的），然后返回给前端。而且这种情况我们可以利用dataTable的服务器端翻页。JavaScript代码：如下：
HTML代码如下：

<table id="example" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Extn.</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
 
        <tfoot>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Extn.</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </tfoot>
    </table>

$(document).ready(function() {
    $('#example').dataTable( {
        "processing": true,
        "serverSide": true,
        "ajax": "../processing.php"
    } );
} );