Question

我刚发现DataTables，并且正在玩它。该页面的任务是根据客户端的参数搜索帖子，并在不重新加载页面的情况下随时返回填充表的JSON。我面临的问题是：

TypeError: $(...).dataTable is not a function。在（strong）之前（完全）加载jQuery（完全）。 jQuery不会加载两次（除非DataTables自己加载jQuery，但我认为不是这样）。加载顺序正确。我使用的是Laravel，jQuery在每个页面的layouts/app.blade.php中都作为第一个脚本加载。所有视图扩展了该布局，并且每个视图的特定脚本都在之后加载到@section('scripts')中。
我找到了this answer，并在致电$.noConflict(true)之前先致电$('#results').DataTable()。现在，该插件可以正常工作，但是与jQuery相关的所有其他操作都返回$ is not a function（尤其是新的$ .ajax调用）。

我想了解为什么抛出TypeError: $(...).dataTable is not a function并解决它而不使用$.noConflict(true)。

有人有什么主意吗？

脚本的加载顺序：

layouts/app.blade.php

<!-- Scripts -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
<script src="{{ asset('js/admin/main.js') }}"></script>

@yield('scripts')

index.blade.php

@extends('layouts.app')
@section('scripts')
    <script src="//cdn.jsdelivr.net/npm/flatpickr"></script>
    <script src="//cdn.datatables.net/1.10.18/js/jquery.dataTables.min.js"></script>
    <script src="{{ secure_asset('js/helpers.js') }}"></script>
    <script src="{{ secure_asset('js/admin/Values.js') }}"></script>
    <script src="{{ secure_asset('js/SVGTools.js') }}"></script>
    <script src="{{ secure_asset('js/admin/Search.js') }}"></script>
    <script src="{{ secure_asset('js/admin/Delete.js') }}"></script>
    <script src="{{ secure_asset('js/admin/blog/post/PostSearch.js') }}"></script>
    <script src="{{ secure_asset('js/admin/blog/post/index.behaviour.js') }}"></script>
@endsection

以下是将数据显示到表中的代码的一部分（在PostSearch.js中）：

this.search = function () {
    var getData = function () {
        var v = new Values();
        v.collect('getValue');
        console.log(v.getCollection.raw);

        return v.getCollection.raw;
    };

    /**
     * Display the data into the table.
     *
     * @param {Object} data
     * @param {Function} callback
     */
    var displayData = function (data, callback) {
        if ( ! data.length ) {
            //  No result
            document.getElementById('no-result').innerText = 'Nessun risultato per "'+document.getElementById('search').value+'"';
        } else {
            //  Yes results
            document.getElementById('no-result').innerText = "";

            // $.noConflict(true);
            $('#results').DataTable( {
                "ordering": true,
                "data": data,
                "searching": true,
                "columns": [
                    {'data':'id'},
                    {'data':'title'},
                    {'data':'category'},
                    {'data':'article'},
                    {'data':'likes'},
                    {'data':'status'},
                    {'data':'publication_datetime'},
                    {'data':'id'}
                ]
            });
        }

        callback();
    };

    /**
     * Empty the table.
     */
    var emptyData = function () {
        document.getElementsByTagName('tbody')[0].innerHTML = '';
    };

    new Search({
        events: {
            "click": document.getElementById('search')
        },
        url: function () {
            return route_resource_admin_blog('posts', 'show', 'search')
        },
        data: function () {
            return getData();
        },
        clear: function () {
            emptyData();
        },
        previousStuff: function (target, searchTerm) {

        },
        successCallback: function (data, textStatus, jqXHR) {
            console.log('SUCCESS');
            displayData(data, function () {

            });
        },
        errorCallback: function (jqXHR, textStatus, errorThrown) {

        },
        beforeSend: function (jqXHR, settings) {

        },
        complete: function (jqXHR, textStatus) {

        }
    });
};

Answer 1

尽管很遗憾，我没有找到问题的根源，但是使用jQuery.noConflict()代替$.noConflict()可以使脚本正常运行，而不会导致以下$别名崩溃。

TypeError：$（...）。DataTable不是一个函数：没有$ .noConflict（true），DataTables无法工作

1 个答案: