jquery插件datatables，如何使用？

我们相信：世界是美好的，你是我也是。平行空间的世界里面，不同版本的生活也在继续...

其实也是看laravel学院的捐款页面想到的这个话题，一个普通的table引用这个jquery插件后，立刻变得无比强大。可搜索，可分页，可排序。是不是很心动？当然了，你的table必须是标准的写法。例如thead和tbody都不能省略哦。下面是laravel学院的截图及代码。大家照猫画虎即可。

网址：
http://laravelacademy.org/donate-us

HTML：

<table id="donate-table" class="table table-bordered"> 
    <thead> 
        <tr> 
            <th>用户</th> 
            <th>时间</th> 
            <th>金额</th> 
            <th>支付方式</th> 
        </tr> 
    </thead> 
    <tbody> 
        <tr>
            <td>微信网友</td> 
            <td>2017-02-23</td> 
            <td>8.00</td> 
            <td>微信转账</td> 
        </tr> 
        <tr> 
            <td>微信网友</td> 
            <td>2017-02-22</td> 
            <td>32.00</td> 
            <td>微信转账</td> 
        </tr> 
        <tr> 
            <td>微信网友</td> 
            <td>2017-02-15</td> 
            <td>8.00</td> 
            <td>微信转账</td> 
        </tr>
    </tbody>
</table>

JS和css:

<link rel="stylesheet" href="//cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css">
<script type="text/javascript" src="//cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<script type="text/javascript">
    jQuery(document).ready(function () {
        jQuery('#donate-table').DataTable({
            'iDisplayLength': 25,
            'order': [[1, 'desc']]
        });
    });
</script>

文档及说明：https://datatables.net/

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。