类型错误： $（...）.数据表不是函数

javascript jquery css asp.net datatables

2022-08-30 04:49:37

我正在尝试从这个链接为我的项目使用jQuery的Datatable JS。

我从同一来源下载了完整的库。包中给出的所有示例似乎都可以正常工作，但是当我尝试将它们合并到我的CSS，JS中时，根本不起作用。WebForms

以下是我所做的：

<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文件结构如下所示：

File structure of JS and CSS in solution

我已经添加了所有必要的JS和CSS参考，如手册中所示。渲染仍然不符合预期。没有CSS，甚至JS也不起作用。

同样在控制台中，我收到以下错误：

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

我仍然没有在这里绑定任何动态数据（比如在中继器中），它仍然不起作用。

有人可以指导我朝着这个问题的正确方向前进吗？

答案 1

原因

此错误可能有多种原因。

jQuery DataTables 库丢失。
jQuery 库是在 jQuery DataTables 之后加载的。
加载多个版本的 jQuery 库。

溶液

在 jQuery DataTables 之前，只包含一个版本的 jQuery 库版本 1.7 或更高版本。

例如：

<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.dataTables.min.js" type="text/javascript"></script>

请参阅 jQuery DataTables： Common JavaScript 控制台错误，以获取有关此错误和其他常见控制台错误的更多信息。

答案 2

这对我有用。但请确保在首选 dataTable.js 文件之前加载 jquery.js。干杯！

<script type="text/javascript" src="~/Scripts/jquery.js"></script>
<script type="text/javascript" src="~/Scripts/data-table/jquery.dataTables.js"></script>

 <script>$(document).ready(function () {
    $.noConflict();
    var table = $('# your selector').DataTable();
});</script>