jQuery DataTables的简单应用

2022-12-06 15:08:52

一、简介

DataTables是一个十分强大的jQuery表格插件。这是一个高度灵活的工具，依据的基础逐步增强，这将增加先进的互动控制，支持任何HTML表格。

主要特点：

自动分页处理
即时表格数据过滤
数据排序以及数据类型自动检测
自动处理列宽度
可通过CSS定制样式
支持隐藏列
可扩展性和灵活性
易用
国际化
动态创建表格

二、安装

在你的项目中使用 DataTables，只需要引入三个文件即可，jQuery库，一个DT的核心js文件和一个DT的css文件，代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
    <link rel="stylesheet" type="text/css" href="./datatables/media/css/jquery.dataTables.min.css">
    <script type="text/javascript" language="javascript" src="./datatables/media/js/jquery.js"></script>
    <script type="text/javascript" language="javascript" src="./datatables/media/js/jquery.dataTables.min.js"></script>
    <title>DataTables examples - Examples index</title>
</head>
<body class="dt-example">

    <table id="table_id" class="display">
        <thead>
            <tr>
                <th>head 1</th>
                <th>head 2</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Row 1 Column 1</td>
                <td>Row 1 Column 2</td>
            </tr>
            <tr>
                <td>Row 2 Column 1</td>
                <td>Row 2 Column 2</td>
            </tr>
        </tbody>
    </table>

    <script>
        $(document).ready(function () {
            $('#table_id').DataTable();
        });
    </script>

</body>
</html>

如果你需要更加复杂的功能，则需要对DataTables插件使用更多的选项以达到你的要求。