Bootstrap 和 jQuery 的 MD（$(...)DataTable 不是函数）答案

【问题标题】：MD for Bootstrap & jQuery($(...)DataTable is not a function)Bootstrap 和 jQuery 的 MD（$(...)DataTable 不是函数）
【发布时间】：2019-10-09 02:04:08
【问题描述】：

这是我当前的示例blade 文件

<html>
<head>
<title></title>

<!-- Bootstrap core CSS -->
<link href="{{ asset('css/bootstrap.min.css') }}" rel="stylesheet">

<!-- Material Design Bootstrap -->
<link href="{{ asset('css/mdb.min.css') }}" rel="stylesheet">

<!-- Your custom styles (optional) -->
<link href="{{ asset('css/style.css') }}" rel="stylesheet">

<!-- JQuery -->
<script type="text/javascript" src="{{ asset('js/jquery-3.4.1.min.js') }}"></script>

<!-- DataTables CSS -->
<link href="{{ asset('css/addons/datatables.min.css') }}" rel="stylesheet">
<!-- DataTables JS -->
<script href="{{ asset('js/addons/datatables.min.js') }}" rel="stylesheet"></script>

<!-- DataTables Select CSS -->
<link href="{{ asset('css/addons/datatables-select.min.css') }}" rel="stylesheet">
<!-- DataTables Select JS -->
<script href="{{ asset('js/addons/datatables-select.min.js') }}" rel="stylesheet"></script>
</head>


<body>


<div class="container">
<div class="float-left"><h2>Location List</h2></div>

<div class="container" style="overflow-y:auto;">
    <table id="dtMaterialDesignExample" class="table table-striped" cellspacing="0" width="100%">
    <thead>
        <tr>
        <th class="th-sm">Name
        </th>
        <th class="th-sm">Position
        </th>
        <th class="th-sm">Office
        </th>
        <th class="th-sm">Age
        </th>
        <th class="th-sm">Start date
        </th>
        <th class="th-sm">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>
        </tr>
    </tbody>
    <tfoot>
        <tr>
        <th>Name
        </th>
        <th>Position
        </th>
        <th>Office
        </th>
        <th>Age
        </th>
        <th>Start date
        </th>
        <th>Salary
        </th>
        </tr>
    </tfoot>
    </table>

   </div>
   </div>

    <script>
   // Material Design example
    $(document).ready(function () {
    $('#dtMaterialDesignExample').DataTable();
    $('#dtMaterialDesignExample_wrapper').find('label').each(function () {
        $(this).parent().append($(this).children());
    });
    $('#dtMaterialDesignExample_wrapper .dataTables_filter').find('input').each(function () {
        const $this = $(this);
        $this.attr("placeholder", "Search");
        $this.removeClass('form-control-sm');
    });
    $('#dtMaterialDesignExample_wrapper .dataTables_length').addClass('d-flex flex-row');
    $('#dtMaterialDesignExample_wrapper .dataTables_filter').addClass('md-form');
    $('#dtMaterialDesignExample_wrapper select').removeClass(
    'custom-select custom-select-sm form-control form-control-sm');
    $('#dtMaterialDesignExample_wrapper select').addClass('mdb-select');
    $('#dtMaterialDesignExample_wrapper .mdb-select').materialSelect();
    $('#dtMaterialDesignExample_wrapper .dataTables_filter').find('label').remove();
    });
 </script>


<!-- SCRIPTS -->
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="{{ asset('js/popper.min.js') }}"></script>

<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="{{ asset('js/bootstrap.min.js') }}"></script>

<!-- MDB core JavaScript -->
<script type="text/javascript" src="{{ asset('js/mdb.min.js') }}"></script>

</body>
</html>

部分js文件加载在body codes下面

并且所有jQuery, dataTable.js, dataTable.css 都加载到<head> 中

我不认为blade 文件正在加载可能导致dataTables 错误的多个jQuery 文件

这是我遇到的错误。

Uncaught TypeError: $(...).DataTable is not a function
at HTMLDocument.<anonymous> (location:612)
at e (jquery-3.4.1.min.js:2)
at t (jquery-3.4.1.min.js:2)

这是MDB DataTable that I'm working on

https://mdbootstrap.com/docs/jquery/tables/datatables/

我的链接有问题吗？

顺便说一句，css 和 js 文件都存在

它们位于此文件路径中

【问题讨论】：

哦哈哈哈谢谢它的作品 nooow!!!

标签： jquery laravel material-design

【解决方案1】：

您在以下行中使用了href 而不是src：

<!-- DataTables JS -->
<script href="{{ asset('js/addons/datatables.min.js') }}" rel="stylesheet"></script>

改成：

<!-- DataTables JS -->
<script src="{{ asset('js/addons/datatables.min.js') }}" rel="stylesheet"></script>

@Casper 回答

【讨论】：