文档函数中的“DataTable 不是函数”错误答案

【问题标题】："DataTable is not a function" error inside document function文档函数中的“DataTable 不是函数”错误
【发布时间】：2019-07-12 11:49:49
【问题描述】：

通常，我通过在内部提供以下代码来初始化数据表

$(function () { 
    $('#keywords-table').DataTable({ 
    "ajax": ({ 
        url: "{{ route('getKeywordsByProductId') }}", 
        method: "get",                                                  
    }), 
    "columns": [
        { "data": "action" },
        { "data": "name" },
    ]
});

并尝试通过$('#keywords-table').DataTable().ajax.reload(); 重新加载它（从$(function() {}); 中的某个函数，它工作得很好。

但是当我尝试从下面的函数重新加载它时，我得到了以下错误

未捕获的类型错误：$(...)DataTable 不是函数。

$(document).on('click', '.edit', function() {
    $('#keywords-table').DataTable().ajax.reload();
});

我试着放了

$(document).on('click', '.edit', function() {
  $('#keywords-table').DataTable().ajax.reload();
});

在$(function() {});里面但是错误依然存在。

让我知道如何解决这个问题。

【问题讨论】：

有任何控制台错误？
Uncaught TypeError: $(...).DataTable is not a function at Object.success (1:1303) at fire (app.js:9564) at Object.fireWith [as resolveWith] ( app.js:9694) 在完成 (app.js:15806) 在 XMLHttpRequest. (app.js:16058) 在 Object.send (app.js:16110) 在 Function.ajax (app.js:15707)在 HTMLAnchorElement. (1:1282) 在 HTMLDocument.dispatch (app.js:11510) 在 HTMLDocument.elemData.handle (app.js:11317)
要么不加载插件文件，要么在加载之前尝试访问它，要么在页面中多次加载 jQuery.js
你链接jquery dataTable CDN了吗？？您的插件似乎没有加载或您忘记了它
@charlietfl 感谢您的建议。实际上，问题只发生在 $(document) 函数中，并且它工作得很好。我检查了 jquery 和其他文件，它们位于正确的位置（在我确定调用数据表函数之前）。由于某些原因，我仍然需要在 $(document) 中调用它，这是一个问题。

标签： javascript jquery ajax datatables

【解决方案1】：

您需要创建一个变量来保存由 DataTable() 创建的值。尝试将您的代码更改为

var myTable= $('#keywords-table').DataTable({ 
    "ajax": ({ 
        url: "{{ route('getKeywordsByProductId') }}", 
        method: "get",                                                  
    }), 
    "columns": [
        { "data": "action" },
        { "data": "name" },

    ]
});

然后

$(document).on('click', '.edit', function() {
    myTable.ajax.reload();
});

【讨论】：

非常感谢您的回答。实际上，我也尝试以这种方式修复错误。我将表放在 eleTable 变量中，但仍然出现“Uncaught TypeError: eleTable.DataTable is not a function”错误
您在哪一行遇到问题？是在初始化 $('#keywords-table').DataTable({ ...?
当我尝试调用 myTable.ajax.reload();。初始化没问题。无论如何，我已经通过迁移 $(function() {}) 中的所有代码并仅使用 $(document).ready(function() { }); 解决了这个问题