注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

网易杭州 QA Team

务实 专注 分享 做有态度的QA

 
 
 
 
 

日志

 
 

强大的Query Table插件 - DataTables使用入门  

来自黄庆兵   2014-05-20 19:49:38|  分类: 语言类 |举报 |字号 订阅

  下载LOFTER 我的照片书  |
    DataTables,一个强大的jQuery的表格插件,高度灵活,逐步定制,互动友好,支持多种HTML表格,最重要的是,它是免费开源的哦~。
    简单说来,它有如下特点:
  • 自动分页处理 
  • 即时表格数据过滤 
  • 数据排序以及数据类型自动检测 
  • 自动处理列宽度 
  • 可通过CSS定制样式 
  • 国际化
  • 可扩展性和灵活性 
  • 易用
  • 免费
    废话不多说,直接上定制版Demo:http://startbootstrap.com/templates/sb-admin-v2/tables.html
强大的Query Table插件 - DataTables使用入门 - 网易杭州QA - 网易杭州 QA Team
 
强大的Query Table插件 - DataTables使用入门 - 网易杭州QA - 网易杭州 QA Team
 图:基于Bootstrap3的自定义DataTables表格
        如上图所示,映入法眼的第一个Table正是使用了DataTables插件,包含了最基本的分页、搜索、排序等功能,再加上做了一些自定义样式和表头,很有bootstrap3风格,如此强劲,真乃表格中的神器~
    那请问哪里可以Get到呢?好说,此定制版Demo有zip包免费奉送,下载解压即可,组件丰富!加载其中dataTables相关的css和js,就可以直接拿来主义啦~
        而想了解更原生的用法,当然非官网莫属:https://datatables.net/
    官网既有介绍,又有指引,更包含着丰富的栗子~技术网站都当如此,夫复何求!建议先大致浏览首页,看看是否满足你的需求,接着直奔Getting started,如下是我照Getting started写的一个小demo,非常简单,其中的css和js文件在官网中有下载:http://datatables.net/download/index
<!DOCTYPE html>
<html>
<head>
    <!-- DataTables CSS --> 
    <link rel="stylesheet" type="text/css" href="http://qa.blog.163.com/blog/css/jquery.dataTables.css">
    <!-- jQuery -->
    <script type="text/javascript" charset="utf8" src="http://qa.blog.163.com/blog/js/jquery.js"></script>
    <!-- DataTables -->
    <script type="text/javascript" charset="utf8" src="http://qa.blog.163.com/blog/js/jquery.dataTables.js"></script>
</head>
<body>
    <table id="table_id" class="display">
        <thead>
            <tr>
                <th>Column1</th>
                <th>Column2</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Row1 Data1</td>
                <td>Row1 Data2</td>
            </tr>
            <tr>
                <td>Row2 Data1</td>
                <td>Row2 Data2</td>
            </tr>
        </tbody>
    </table>

<script>
    $(document).ready( function () {
        $('#table_id').DataTable();
    } );
</script>
</body>
</html> 
    然后,就是实践再实践,遇到问题请查看官网文档,想要扩展请找官网例子,实在解决不了你逛论坛发问吧。
    最后,想说的是,DataTables会有一个性能瓶颈,表格数据会一次全部加载本地,剩下都是js操作,导致第一次加载较慢,后续操作神速!对于大数据表格,还是要实现动态加载,这也正在探索解决中……

  评论这张
 
阅读(3076)| 评论(1)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2016