jquery.dataTables的用法

写页面前端时，使用表格的插件可以快速漂亮的排版。本例子中使用jquery.dataTables来处理table。直接来点干货

html代码如下

<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
            <thead>
                <tr>
                    <th>time</th>
                    <th>name</th>
                    <th>number</th>
                </tr>
            </thead>
            
            <tbody>
                <tr>
                    <td>2016-01-1 10:10:10</td>
                    <td>baidu</td>
                    <td>12</td>
                </tr>
                <tr>
                    <td>2016-02-1 10:10:10</td>
                    <td>google</td>
                    <td>54</td>
                </tr>
                <tr>
                    <td>2016-01-1 10:15:10</td>
                    <td>360</td>
                    <td>21</td>
                </tr>
            </tbody>
        </table>

最简单的初始化js代码如下

$(function(){
            var table= $("#example").DataTable();
});

注意：html代码中需要定义thead,tbody。

结果如下：

 

可以看出他是自动排序的。

如果想要按照时间逆序排列，js代码如下

　　　　$(function(){
            var table= $("#example").DataTable({
                "order":[[0,"desc"]]
            });


        });

注意：查看文档时要注意版本是否一致。当时我就是没有在意这个问题，在网上找了好多资料，就是各种试，各个版本还不一样，最后按照官网写的，照样不行。最后下载官网的

最新jquery，dataTables按照dataTables官网的代码写这才可以。所以，看文档一定要注意版本是否一致。不要掉进这个坑。

 

还有更多的属性和方法没有写，如果感兴趣可以查看官方网站了解更多信息。https://datatables.net/