logo标签列表

类型错误：$(...).DataTable不是一个函数。

javascriptjquerycssasp.netdatatables
142

我正在尝试在我的项目中使用jQuery的Datatable JS，下载链接为这里。

我从同一来源下载了完整的库。包中提供的所有示例似乎都能正常工作，但当我尝试将它们合并到我的WebForms中时，CSS和JS根本无法工作。

以下是我做的：

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <table id="myTable" class="display" cellspacing="0" width="100%">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Position</th>
                    <th>Office</th>
                    <th>Age</th>
                    <th>Start date</th>
                    <th>Salary</th>
                </tr>
            </thead>
            <tfoot>
                <tr>
                    <th>Name</th>
                    <th>Position</th>
                    <th>Office</th>
                    <th>Age</th>
                    <th>Start date</th>
                    <th>Salary</th>
                </tr>
            </tfoot>
            <tbody>
               <!-- table body -->
            </tbody>
        </table>
    </div>
    <script src="js/jquery.dataTables.js" type="text/javascript"></script>
    <script src="js/jquery.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#myTable').DataTable();
        });
    </script>
    </form>
</body>
</html>

我的解决方案中JS和CSS的文件结构如下：

JS和CSS在解决方案中的文件结构

我已按照手册添加了所有必要的JS和CSS引用。但是渲染效果并不如预期。没有CSS，甚至连JS也无法正常工作。

同时，在控制台中我收到以下错误信息：

ReferenceError: jQuery is not defined
TypeError: $(...).DataTable is not a function

我在这里仍然没有绑定任何动态数据（例如在重复器内），但它仍然无法工作。

请问有人可以指导我解决这个问题吗？

无论我写的代码有多完美，但我还是遇到了同样的错误。经过长时间的分析，我决定重启我的电脑，因为我已经有7天没有重启了。然后，我的代码开始正常工作了。 - Ashok kumar
@Ashokkumar：你可能有点运气好！ - Abhishek Ghosh
18个回答
3

我知道现在已经很晚了，但是我可以帮助某人。

如果您没有在document.ready内添加$('#myTable').DataTable();，也会出现这种情况。

因此，尝试这个：

$('#myTable').DataTable();

$(document).ready(function() {
    $('#myTable').DataTable();
});
1
我也遇到了这个错误。出于某种原因，我最初编写的代码中有一个分号

。
var table = $('#myTable').DataTable({
    "paging": false,
    "order": [[ 4, "asc" ]]
});

有时这段代码不会报错，而有时会。通过将代码改为

可以解决该问题。
$('#myTable').DataTable({
    "paging": false,
    "order": [[ 4, "asc" ]]
});

错误似乎已经停止

0
这种情况也可能发生在你写“Datatable”而不是“DataTable”的时候。（DataTable中的T必须大写）。这是初学者的错误。
$(document).ready(function() {
            $('#category-table').DataTable({
                // Your Code
            });
0
有时候会发生脚本（datatable初始化）嵌入一个通用页面模板的情况，所以如果某个实际上没有任何表格的页面并且你没有导入datatable相关的jquery文件，你就会遇到这个错误，因为通用初始化仍在寻找它。（这是我的情况）
解决方案：将datatable的初始化包装在检查库是否存在的条件中：
以下是实际示例。
if (typeof jQuery.fn.DataTable != "undefined"){
    $('#accordionExample table').DataTable( {
        "pageLength": 5,
        "info": false,
        "order": [[ 1, "desc" ]]
    } );
}
0
如果您确定已按照上述描述对齐了脚本，请确保 DataTable 的大小写正确。
之前。
$(document).ready(function() {
    $('#myTable').Datatable();
});

之后

$(document).ready(function() {
    $('#myTable').DataTable();
});

小写的 t 有问题，当我把它改成大写的 T 后，它就像魔法一样正常工作了。

0

在Flask中遇到了同样的问题，我已经有一个加载JQuery、Popper和Bootstrap的模板。我将该模板扩展到其他模板中，作为加载包含表格的页面的基础。

由于某种原因，在Flask中外部模板中的文件似乎会在层次结构中上面的表格文件（您正在扩展的文件）之前加载，因此JQuery会在DataTables文件之前加载，导致了这个问题。

我不得不创建另一个模板，在其中运行所有JS CDN的导入，这解决了问题。

0
在我的情况下，解决方案是从浏览器中删除Cookie。
0

请检查您的Nuget包。我不得不删除jQuery Nuget包才能使其正常工作。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接