使用 jQuery DataTable 函数的问题答案

【问题标题】：Issues using jQuery DataTable function使用 jQuery DataTable 函数的问题
【发布时间】：2019-12-19 19:43:12
【问题描述】：

过去两天我一直在尝试让 laravel-datatables 工作。

我正在尝试将用户列表获取到数据表并让所有后端工作正常。但是，我一直遇到 jQuery 数据表插件的问题。在谷歌搜索问题后，我只找到了关于错误加载顺序的解决方案。但是我在加载数据表插件之前确实加载了 jQuery，所以我很难理解为什么它会以这种方式失败。

<script type="text/javascript">
    $(document).ready(function() {
        $('#student-datatable').DataTable({
            "processing": true,
            "serverSide": true,
            "ajax": "{{ route('data.get.students') }}",
            "columns": [
                { "data": "name" }
            ]
        });
    });
</script>

导致以下错误

Uncaught TypeError: $(...).DataTable is not a function
    at HTMLDocument.<anonymous> (students:90)
    at i (jquery.min.js:2)
    at Object.fireWith [as resolveWith] (jquery.min.js:2)
    at Function.ready (jquery.min.js:2)
    at HTMLDocument.J (jquery.min.js:2)

并且加载顺序如下

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.18/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.18/js/dataTables.bootstrap4.min.js"></script>

我希望该函数能够从 Ajax 获取响应并将其显示在 DataTable 中，以便其他人更容易查看。

【问题讨论】：

尝试使用小写“D”：$('#student-datatable').dataTable(...)
这似乎是 laravel 相关的问题，你使用的是什么版本的 laravel 和 laravel-datatables？您是否按照以下步骤操作：yajrabox.com/docs/laravel-datatables/master？
Rabi：遗憾的是，这并没有解决问题。 barbsan：是的，我已按照该指南进行操作，并且正在使用 9.0 的 laravel-datatables。

标签： javascript jquery ajax laravel datatables

【解决方案1】：

我自己设法解决了这个问题。认为 jQuery 已经与 Laravel 5.8 一起提供并编译到 app.js 文件中。另一件事是“延迟”属性强制在页面加载完成后加载 app.js。这意味着数据表插件将在 jQuery 本身之前加载。

解决方案

删除 defer 属性并将脚本移动到标签之前，但在数据表插件之前。所以新脚本如下所示。

<script src="{{ asset('js/app.js') }}"></script>
<script src="//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.18/js/dataTables.bootstrap4.min.js"></script>
</body>

【讨论】：