数据表的问题 - 不工作样式和 js

如何解决数据表的问题 - 不工作样式和 js

DataTables 插件有问题。添加示例选项卡中列出的代码示例。我通过在线选项包含了诸如适当的 javascript 样式/文件之类的内容，并在本地添加了这些文件，但该表无法正常工作。

操作的结果如下所示。

风格：

updated_at

表格（部分）：

created_at

脚本：

<!-- Style -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="main.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.css">
    <link rel="stylesheet" type="text/css" href="css/jquery.dataTables.min.css">

网站画面

Screen here

有问题的表格和代码来自这里：https://datatables.net/examples/basic_init/table_sorting.html

解决方法

请添加对 JQuery 和 Datatables 库的引用

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>About</title>
    <link ref="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css" rel="stylesheet" />
</head>
<body>
    <table id="grid" class="display" cellspacing="0" style="width:100%">
        <thead>
            <tr>
                <th>Engine</th>
                <th>Browser</th>
                <th>Platform</th>
                <th>Version</th>
            </tr>
        </thead>
    </table>

    <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
    <script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>

    <script type="text/javascript">

        $(document).ready(function () {

            var json = {
                result: [
                    { engine: "Trident",browser: "IE 4.0",platform: "Win 95+",version: 4 },{ engine: "Trident",browser: "IE 5.0",version: 5 },browser: "IE 5.5",version: 5.5 }
                ]
            };

            $('#grid').DataTable({
                data: json.result,columns: [
                    { data: "engine" },{ data: "browser" },{ data: "platform" },{ data: "version" }
                ]
            });

        });

    </script>
</body>
</html>