DataTables 的问题 - 不要使用样式和 js答案

【问题标题】：Problem with DataTables - don't work styles and jsDataTables 的问题 - 不要使用样式和 js
【发布时间】：2021-04-06 01:04:23
【问题描述】：

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

动作的结果如下所示。

风格：

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

网站画面

Screen here

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

【问题讨论】：

标签： javascript html html-table datatables styles

【解决方案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>

【讨论】：

我将所有内容都更改为您提供的代码，但不幸的是它不起作用：/
当您右键单击浏览器并根据您使用的浏览器进行检查时，您是否看到任何错误？
错误：未捕获的 ReferenceError：$ 未在 przeglad-oferty.html:163 中定义代码：
这通常意味着它没有找到 jquery 库。请再次查看我的代码。我已经用 CDN 替换了 jquery 和 datatables 文件引用。也请在数据表引用之前有你的 Jquery 引用
有效！我更改了所有脚本的执行顺序，这是主要问题。非常感谢