之前我已经简单介绍了这款插件，我把此类文章归类为“Web前端”，不是很正确，这款神奇的插件不仅支持客户端，也支持服务器端。通过ajax向服务器请求json数据，并展示到表格中。下面我们就来简单使用一下。

搭建环境

1.下载DataTables插件，下载地址：http://datatables.club/

2.下载完成后，我们只需要media文件夹下的 css ， js 和 images 文件夹

3.在项目中引入 css 样式和 js 脚本文件

首先引入 js/jquery.js 文件

然后引入 js/jquery.dataTables.min.js 文件

最后引入 css/jquery.dataTables.min.css 文件

如何使用DataTables

1.在需要插入表格的地方，插入如下 html 代码

<table id="table_list">
    <tbody>
        <tr>
            <th>ID</th>
            <th>标题</th>
            <th>时间</th>
            <th>操作</th>
        </tr>
    </tbody>
</table>

2.插入 js 代码

var table_list = $("#table_list").DataTable({
    'ajax':{
        'url':'http://localhost/blog/getList.php',//向服务器端请求数据
        'type':'POST'
    },
    //定义列
    'columns':[
        {'data':'id'},
        {'data':'title'},
        {'data':'ctime'},
        {'data':null},
    ],
    //定义最后一列的默认值
    'columnDefs':[{
            'targets':-1,
            'data':null,
            'defaultContent':'<a>修改</a><a>删除</a>',
    }],
    //定义语言
    'language':{
        'info':'第_PAGE_页/共_PAGES_页（共_TOTAL_条记录）',
        'infoEmpty':'没有查询到数据',
        'search':'搜索',
        'show':'ddd',
        'lengthMenu':'显示_MENU_条数据',
        'paginate':{
            'next':'>',
            'previous':'<', 'first':'<<', 'lase':'>>',
        }
    }
})

3.服务器端返回数据格式

返回所有数据，DataTables会自动在客户端实现本地分页，本地分页适用于数据量小的（建议1000条数据一下，非专业测试，仅做参考），在数据量大，请求时间过长的情况下，建议开启服务器模式，在服务器端分页。

echo json_encode(array(
    'data'=>$list,
));