📌  相关文章
📜  如何使用 jQuery DataTables 插件从 JavaScript 数组加载数据？(1)

📅  最后修改于: 2023-12-03 15:08:20.899000             🧑  作者: Mango

如何使用 jQuery DataTables 插件从 JavaScript 数组加载数据？

jQuery DataTables 是一个强大的 JavaScript 表格插件，它可以为你的网站或应用程序添加许多交互式和高度自定义的数据表格。在本文中，我们将介绍如何使用 jQuery DataTables 插件从 JavaScript 数组加载数据。

1. 引入 jQuery 和 DataTables

首先，在 HTML 文件中引入 jQuery 和 DataTables：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jQuery DataTables</title>
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css">
</head>
<body>
    <table id="myTable">
        <thead>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Age</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
    <script src="app.js"></script>
</body>
</html>
2. 创建 JavaScript 数组

我们可以创建一个包含数据的 JavaScript 数组，以用于 DataTables 表格。以下是一个示例数组：

var data = [
    {
        "id": "1",
        "name": "John Doe",
        "age": "28"
    },
    {
        "id": "2",
        "name": "Jane Smith",
        "age": "32"
    },
    {
        "id": "3",
        "name": "Bob Johnson",
        "age": "45"
    }
];
3. 初始化 DataTables

接下来，在 JavaScript 文件中，我们可以使用以下代码将数据加载到 DataTables 表格中：

$(document).ready(function () {
    // 从 JavaScript 数组加载数据
    $('#myTable').DataTable({
        data: data, // 传入数据数组
        columns: [
            { data: 'id' },
            { data: 'name' },
            { data: 'age' }
        ]
    });
});

我们使用 $(document).ready() 确保页面完全加载后再初始化 DataTables。

在 data 属性中，我们传入我们之前创建的 JavaScript 数组。在 columns 属性中，我们指定了表格中的列名，这些列名应与数组中的键名相匹配。

现在当页面加载时，您应该会看到一个包含 JavaScript 数组中数据的 DataTables 表格！

4. 添加其他 DataTables 功能

除了基本的表格，DataTables 还提供了众多功能，如排序、搜索、分页和导出。下面是如何添加这些功能的示例代码：

排序

$('#myTable').DataTable({
    data: data,
    columns: [
        { data: 'id' },
        { data: 'name' },
        { data: 'age' }
    ],
    order: [[1, 'desc']] // 按第 2 列（名字）降序排列
});

搜索

$('#myTable').DataTable({
    data: data,
    columns: [
        { data: 'id' },
        { data: 'name' },
        { data: 'age' }
    ],
    search: {
        search: 'Doe' // 搜索 "Doe"
    }
});

分页

$('#myTable').DataTable({
    data: data,
    columns: [
        { data: 'id' },
        { data: 'name' },
        { data: 'age' }
    ],
    paging: true, // 开启分页
    lengthMenu: [5, 10, 15, 20], // 每页显示项数选项
    pageLength: 5 // 每页显示 5 项
});

导出

$('#myTable').DataTable({
    data: data,
    columns: [
        { data: 'id' },
        { data: 'name' },
        { data: 'age' }
    ],
    buttons: [
       'copy', 'excel', 'pdf' // 导出格式选项
    ]
});

DataTables 还有许多其他选项和功能，您可以参考官方文档了解更多信息。

现在您已经知道如何使用 jQuery DataTables 插件从 JavaScript 数组加载数据了！