官方介绍：Datatables是一款jquery表格插件。它是一个高度灵活的工具，可以将任何HTML表格添加高级的交互功能。

用了两天Datatables，感受就是：

　　高性能（待测）,响应式,功能完整

　　用作后台美观度不错；

　　与PHP配合完美（PHP倾向于返回数组类型的数据）；　

　　将每个单元格分离容易整理思路，不再手动加入td tr标签；

　　表格自动排序神器……等等。

总之排除很多干扰项 专注于表格内容。

 

想使用datatables可以引入官方的js或css库

<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.12/css/jquery.dataTables.css">
 
<!-- jQuery -->
<script type="text/javascript" charset="utf8" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
 
<!-- DataTables -->
<script type="text/javascript" charset="utf8" src="http://cdn.datatables.net/1.10.12/js/jquery.dataTables.js"></script>

 

或者下载最新官方包 http://datatables.net/releases/DataTables-1.10.12.zip

也可以访问datatables官网https://www.datatables.net/里面也有配套的jquery.dataTables.min.css文件下载

引入js插件后在html代码中加入一个表格

<table id="table_id" class="display">
    <thead>
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1111</td>
            <td>2222</td>
        </tr>
        <tr>
            <td>3333</td>
            <td>4444</td>
        </tr>
    </tbody>
</table>

接下来创建js文件 只要一句话就会初始化datatables

$(document).ready( function () {
    $('#table_id').DataTable();
} );

能激活datatables插件的关键点除了引包就是在table的id 也就是$('#table_id').DataTable();这一行代码

 画风就从

变成了