时间戳

首页 > 解决方案 > 即使所有内容都以正确的顺序包含在内，数据表也不是一个函数

javascript - 即使所有内容都以正确的顺序包含在内，数据表也不是一个函数

问题描述

<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Test</title>

    <!-- Scripts -->
    <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
    <script src="//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready( function () {
            $('#item_list').DataTable();
        });
    </script>
    
    <!-- Styles -->
    <link href="/metronic/assets/global/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="//cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
  <table class="table table-striped" id="item_list">
                    <thead class="thead-dark">
                        <tr>
                            <th class="all">Position</th>
                            <th class="all">Name</th>
                            <th class="all">Club</th>
                            <th class="all">Value</th>
                            <th class="all">Points</th>
                            <th class="all">Add</th>
                        </tr>
                    </thead>
                    <tbody>
                      <tr>
                                <td>S</td>
                                <td><a data-id="88" class="player-info">Andreas Cornelius</a></td>
                                <td>Atalanta</td>
                                <td>4.50</td>
                                <td>0</td>
                                <td><a class="btn-sm btn btn-success" href="http://127.0.0.1:8019/my-team">Add</a></td>
                            </tr>
                                                    <tr>
                                <td>G</td>
                                <td><a data-id="1190" class="player-info">Etrit Berisha</a></td>
                                <td>Atalanta</td>
                                <td>4.50</td>
                                <td>11</td>
                                <td><a class="btn-sm btn btn-success" href="http://127.0.0.1:8019/my-team">Add</a></td>
                            </tr>
                                                    <tr>
                                <td>G</td>
                                <td><a data-id="1191" class="player-info">Marco Carnesecchi</a></td>
                                <td>Atalanta</td>
                                <td>4.50</td>
                                <td>0</td>
                                <td><a class="btn-sm btn btn-success" href="http://127.0.0.1:8019/my-team">Add</a></td>
                            </tr>
                    </tbody>
                    </table>
</body>
</html>

我收到此错误：

Uncaught TypeError: $(...).DataTable is not a function

这是我的代码：

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready( function () {
        $('#item_list').DataTable();
    });
</script>

我从字面上删除了所有其他我必须确保没有冲突或任何东西的脚本。jQuery 以其他方式工作，因此例如可以这样工作：

$(document).ready( function () {
    console.log('What is going on');
});

有谁知道这里可能有什么问题？

我从各自的 CDN 获得了 jQuery 和 Datatables 的最新版本。

这是实际的表：

<table class="table table-striped" id="item_list">
                <thead class="thead-dark">
                    <tr>
                        <th class="all">Position</th>
                        <th class="all">Name</th>
                        <th class="all">Club</th>
                        <th class="all">Value</th>
                        <th class="all">Points</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($players as $player)
                        <tr data-id="{{ $player['id'] }}">
                            <td>{{ $player['position']['short_name'] }}</td>
                            <td>{{ $player->name }}</td>
                            <td>{{ $player['club']['name'] }}</td>
                            <td>{{ $player->value }}</td>
                            <td>{{ $player->season_score }}</td>
                        </tr>
                    @endforeach
                </tbody>
            </table>

所有行都显示了正确的数据，问题只是数据表。

标签： javascriptjquerydatatables

解决方案

推荐阅读