我们相信：世界是美好的，你是我也是。 来玩一下解压小游戏吧！

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

苏南大叔：jquery插件datatables，如何使用？ - jquery-datatables
jquery插件datatables，如何使用？（图1-1）

网址：
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>
HTML

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>
HTML

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

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

 【福利】 腾讯云最新爆款活动！1核2G云服务器首年50元！

 【源码】本文代码片段及相关软件，请点此获取更多信息

 【绝密】秘籍文章入口，仅传授于有缘之人   jquery