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

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

欢迎转载传播本篇原创文章,转载请保留链接及作者信息。
本站采用创作共用版权协议, 要求署名、非商业用途和相同方式共享。
转载本站内容必须也遵循“署名-非商业用途-相同方式共享”的创作共用协议。
程序如此灵动~》下所有原创文章,如被用于商业用途,请您按规定支付稿费。

打赏领取小礼物

打赏任意金额,发送截图到邮箱 shang@newsn.net ,可以领取精选回馈如下(任选其一):
  • 《前端视频教程大礼包》一套
  • 《wordpress精选皮肤》一套
  • 《dedecms织梦精选模板》一套
感谢您的打赏,让我更有动力,将更多精彩教程文章,呈现给大家!谢谢!

岁月静好

关注互联网发展,关注苏南大叔的《程序如此灵动~》博客
本文章来自:程序如此灵动~
博客地址为:https://newsn.net/
原文地址为:https://newsn.net/say/jquery-plugin-datatables.html
上一篇好文:jquery1.9以后的版本live函数替换
下一篇好文:手机唤起qq加群操作的代码

如果您转载了本文章,出于某种原因,并没有注明作者或者出处。
在这里,苏南大叔也表示理解和支持。因为苏南大叔深深地明白:
您会在合适的时机,合适的地方,给本博客一个外链。对吧?
您若开心,便是安好!岁月静好,但愿世界和平,没有纷争~