为啥浏览器控制台日志给我错误“数据表不是函数”？

Posted 2023-03-14

【中文标题】为啥浏览器控制台日志给我错误“数据表不是函数”？

【英文标题】：Why browser console log giving me error "Datatable is not a function"?为什么浏览器控制台日志给我错误“数据表不是函数”？

【发布时间】：2019-09-04 10:11:49

【问题描述】：

我在我的代码中使用数据表。在我的网页中，当我单击将显示数据表时，有一个链接，到目前为止，我的代码工作正常，但没有响应我还在我的代码中添加了所需的数据表脚本，但是当我看到控制台日志时，它显示数据表不是函数的错误。我正在使用 laravel，下面是我添加的数据表链接。

$(document).ready(function()
    $('#exam-result-table').DataTable();
);

$('#show-results').click(function(event)      
   //alert('hiiii');   
        $.ajax(
                headers: 'X-CSRF-TOKEN': token,
                type: 'POST',
                url: ExamResults,
                contentType: 'application/json; charset=utf-8',
                dataType: 'json',
                async: false,
        error: function(data)

          ,
        success: function(data) 
          console.log("success");
          ,
        )
        .done(function (msg) 
            $("#main-exam").empty();
            $('#main-exam').append(msg);
            $('#exam-result-table').DataTable();
        );
);

数据表正在显示，但我没有找到控制台日志给出错误的原因以及我的数据表没有响应的原因。

未捕获的类型错误：$(...).DataTable 不是函数 在 Object.error (exam_homepage.js:166) 在你 (app.js:3) 在 Object.fireWith [as rejectWith] (app.js:3) 在 r (app.js:4) 在 XMLHttpRequest。 (app.js:4) 在 Object.send (app.js:4) 在 Function.ajax (app.js:4) 在 htmlSpanElement。 (exam_homepage.js:155) 在 HTMLSpanElement.dispatch (jquery.js:3074) 在 HTMLSpanElement.elemData.handle (jquery.js:2750)

【问题讨论】：

你是如何添加数据表脚本的？

【参考方案1】：

您可能需要错误版本的 jQuery。 尝试要求包含 jQuery 的 dataTable 版本或在 dataTable 之前要求 jQuery 3。

您可以在此处创建/下载您的数据表： https://datatables.net/download/index

例如。这是带有 jQ​​uery 3 的数据表：

<script type="text/javascript" src="https://cdn.datatables.net/v/dt/jq-3.3.1/dt-1.10.18/datatables.min.js"></script>

你也可以这样做（顺序很重要）：

<script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.18/datatables.min.js"></script>

您不应该在同一页面上需要另一个 jQuery。

【讨论】：

嗨@Amirsadjad 你能举一个代码示例来说明这将如何解决问题