Home编程基础linux学习DataTables 入门使用

DataTables 入门使用

2011 年 3 月 5 日

前言简述

DataTables是一个JavaScript类库，它操作HTML表格，改变表格CSS样式，增强表格功能使其更具有交互性。

DataTables依赖于JQuery类库。

入门示例

环境：DataTables 1.10.11  、JQuery 2.2.1

入门代码：

DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>DataTable Learningtitle>
        <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 1th>
                    <th>Column 2th>
                tr>
            thead>
            <tbody>
                <tr>
                    <td>Row 1 Data 1td>
                    <td>Row 1 Data 2td>
                tr>
                <tr>
                    <td>Row 2 Data 1td>
                    <td>Row 2 Data 2td>
                tr>
            tbody>
        table>
        
        <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表格：

…

4、使用DataTable初始化表格：$(‘#table_id’).DataTable();

5、示例表格中有一个样式：class=”display”，这是DataTables的CSS文件中的样式。

Related Posts

About The Author

bjmayor

程序员，码农，php,python,ios,android,go，产品经理，创业。