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

其实也是看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>

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/

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

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

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

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