«

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

DataTables,一个强大的jQuery的表格插件,高度灵活,逐步定制,互动友好,支持任何HTML表格,最重要的是,它是免费开源的哦~。简单说来,它有如下特点:

废话不多说,直接上定制版Demo:http://startbootstrap.com/templates/sb-admin-v2/tables.html 图:基于Bootstrap3的自定义DataTables表格

如上图所示,映入法眼的第一个Table正是使用了DataTables插件,包含了最基本的分页、搜索、排序等功能,再加上做了一些自定义样式和表头,很有bootstrap风格,如此强劲,真乃表格中的神器~

那请问哪里可以Get到呢?好说,此定制版Demo有zip包【http://startbootstrap.com/downloads/sb-admin-v2.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="css/jquery.dataTables.css">
    <!-- jQuery -->
    <script type="text/javascript" charset="utf8" src="js/jquery.js"></script>
    <!-- DataTables -->
    <script type="text/javascript" charset="utf8" src="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操作,导致第一次加载较慢,后续操作神速!对于大数据表格,还是要实现动态加载,正在探索中!

分享