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

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

 【源码】代码片段及相关软件点此获取

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

本站的忠实读者小伙伴,正在阅读下面这些文章:

欢迎转载传播本篇原创文章,转载请保留链接及作者信息。
欢迎指正文字或逻辑错误,将会择优在文末列出您的信息。
本站采用创作共用版权协议, 要求署名、非商业用途和相同方式共享。
转载本站内容必须也遵循“署名-非商业用途-相同方式共享”的创作共用协议。
未经许可,规模化镜像抄袭本站内容的行为,将会根据有关法律法规进行维权。
程序如此灵动~》下所有原创文章,如被用于商业用途,请您按规定支付稿费。

苏南大叔需要你的支持

感谢您的打赏,让我更有动力,将更多精彩教程文章,呈现给大家!谢谢!