数据表问题 - 不工作 styles 和 js

Question

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

操作的结果如下所示。

风格：

<!-- 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">

表（部分）：

<div class="col-md-6">      
    <h3 style="margin-top: 10px;">Lista produktow</h3>
    <div class="tabela-produkty">
    <table id="example" class="display" style="width:100%">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Position</th>
                    <th>Office</th>
                    <th>Age</th>
                    <th>Start date</th>
                    <th>Salary</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Tiger Nixon</td>
                    <td>System Architect</td>
                    <td>Edinburgh</td>
                    <td>61</td>
                    <td>2011/04/25</td>
                    <td>$320,800</td>
                </tr>
                <tr>
                    <td>Garrett Winters</td>
                    <td>Accountant</td>
                    <td>Tokyo</td>
                    <td>63</td>
                    <td>2011/07/25</td>
                    <td>$170,750</td>

脚本：

<script type="text/javascript" src="jquery.dataTables.min.js"></script>
<script type="text/javascript" src="jquery-3.5.1.js"></script>
<script type="text/javascript" charset="utf8" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous">
</script>

网站画面

屏幕在这里

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

Answer 1

请添加对 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", platform: "Win 95+", version: 5 },
                    { engine: "Trident", browser: "IE 5.5", platform: "Win 95+", version: 5.5 }
                ]
            };

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

        });

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

数据表问题 - 不工作 styles 和 js

问题描述

1 个解决方案

解决方案1
0 已采纳 2020-12-29 15:48:45

数据表问题 - 不工作 styles 和 js

问题描述

1 个解决方案

解决方案1 0 已采纳 2020-12-29 15:48:45

解决方案1
0 已采纳 2020-12-29 15:48:45