使用jQuery DataTable函數的問題

Question

在過去的兩天內，我一直在嘗試使laravel-datatables正常工作。

我正在嘗試獲取數據表的用戶列表，並使所有后端工作正常。 但是，我一直在使用jQuery datatables插件出現問題。 在搜尋了該問題之后，我僅找到有關錯誤加載順序的解決方案。 但是我在加載數據表插件之前就先加載了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中，以使其更易於查看。

Answer 1

我設法自己解決了這個問題。 確定jQuery已經隨Laravel 5.8一起提供並被編譯到app.js文件中。 另一件事是，“ defer”屬性強制在頁面加載完成后加載app.js。 這意味着datatables插件將在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>