'$(...).datatables 不是函数 - Javascript'

在使用 datatables 插件时，有时会遇到 "$(…).datatables 不是函数" 的错误提示。这种错误通常是因为 datatables 插件没有正确引入或者在使用时出现了一些问题。

以下是几种可能导致出现该错误的原因及解决办法：

1. 引入顺序不正确

在引入 datatables 插件时，需要按照一定的顺序引入相关文件，例如：

<!-- 引入 jQuery 核心库 -->
<script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>

<!-- 引入 datatables 核心库 -->
<script src="https://cdn.staticfile.org/datatables/1.10.22/js/jquery.dataTables.min.js"></script>

<!-- 引入 datatables 样式 -->
<link rel="stylesheet" href="https://cdn.staticfile.org/datatables/1.10.22/css/jquery.dataTables.min.css">

如果引入的顺序不正确，可能会出现 "$(…).datatables 不是函数" 的错误提示。因此，我们需要按照正确的顺序引入相关文件。

2. 没有正确初始化 datatables 插件

在引入 datatables 插件后，我们还需要正确初始化插件，例如：

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

如果没有正确初始化 datatables 插件，可能会出现 "$(…).datatables 不是函数" 的错误提示。因此，我们需要在代码中正确初始化插件。

3. 引入多个版本的 jQuery 库

如果我们同时引入了多个版本的 jQuery 库，可能会出现 "$(…).datatables 不是函数" 的错误提示。在这种情况下，我们需要去掉多余的 jQuery 库引用，只使用一个合适的版本。

4. 使用了错误的选择器

在使用 datatables 插件时，我们需要使用正确的选择器指定表格，例如：

<table id="example" class="display" style="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>
    <tbody>
        <tr>
            <td>Tiger Nixon</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$320,800</td>
        </tr>
        ...
    </tbody>
</table>

<script>
$(document).ready(function() {
    $('#example').DataTable();
});
</script>

如果我们使用错误的选择器指定表格，可能会出现 "$(…).datatables 不是函数" 的错误提示。因此，我们需要使用正确的选择器来指定表格。

综上所述，出现 "$(…).datatables 不是函数" 的错误提示通常是因为 datatables 插件没有正确引入或者在使用时出现了一些问题。我们需要按照正确的顺序引入相关文件、正确初始化插件、去掉多余的 jQuery 库引用、使用正确的选择器来指定表格等，以解决此类错误。