歡迎來到Linux教程網
Linux教程網
Linux教程網
Linux教程網
Linux教程網 >> Linux編程 >> Linux編程 >> DataTables 入門使用

DataTables 入門使用

日期:2017/3/1 9:16:11   编辑:Linux編程

前言簡述

DataTables是一個JavaScript類庫,它操作HTML表格,改變表格CSS樣式,增強表格功能使其更具有交互性。

DataTables依賴於JQuery類庫。

入門示例

環境:DataTables 1.10.11 、JQuery 2.2.1

入門代碼:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>DataTable Learning</title>
        <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css" />
    </head>

    <body>
        <table id="table_id" class="display">
            <thead>
                <tr>
                    <th>Column 1</th>
                    <th>Column 2</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Row 1 Data 1</td>
                    <td>Row 1 Data 2</td>
                </tr>
                <tr>
                    <td>Row 2 Data 1</td>
                    <td>Row 2 Data 2</td>
                </tr>
            </tbody>
        </table>
        <!-- jquery.js 要先於 jquery.dataTables.min.js 引入 -->
        <script src="//cdn.bootcss.com/jquery/2.2.1/jquery.js" type="text/javascript"></script>
        <script src="//cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(function() {
                $('#table_id').DataTable();
            })
        </script>
    </body>

</html>

使用要點

1、首先引入DataTables必需的文件:jquery.dataTables.min.css 和 jquery.dataTables.min.js

2、因為DataTable依賴於JQuery,所以在引入DataTables的JS文件之前,還要先引入JQuery文件:jquery.js

3、定義普通的HTML表格:<table id="table_id">...</table>

4、使用DataTable初始化表格:$('#table_id').DataTable();

5、示例表格中有一個樣式:class="display",這是DataTables的CSS文件中的樣式。

Copyright © Linux教程網 All Rights Reserved