DataTable 错误：未捕获的 ReferenceError：未定义 jQuery

Posted 2023-05-08

【中文标题】DataTable 错误：未捕获的 ReferenceError：未定义 jQuery

【英文标题】：DataTable Error: Uncaught ReferenceError: jQuery is not defined

【发布时间】：2014-10-21 06:35:19

【问题描述】：

我的数据表插件不工作，我不知道为什么请帮忙...

当尝试在 Google crome 上调试 javascript 时，我发现了这个错误，我知道它们是否冲突

Uncaught ReferenceError: jQuery is not defined localhost:49769/Scripts/main.js:1 未捕获的错误：找不到图形容器元素 localhost:49769/Scripts/Template/js/plugins/morris/morris.min.js:1 根据 DOM (http://dom.spec.whatwg.org/#dom-range-detach)，“Range.detach”现在是无操作的。

我正在使用 MVC5 开发应用程序

这是主要的Js

jQuery(function ($) 

$(document).ready(function () 
    var table = $("#customers").DataTable();
);

);

<!-- add new calendar event modal -->
<!-- jQuery 2.0.2 -->
<script src="/Scripts/Template/js/jquery-1.11.1.min.js"></script>
<script src="/Scripts/Template/js/jquery.min.js"></script>

<script src="/Scripts/main.js"></script>
<!-- DATA TABES SCRIPT -->
<script src="/Scripts/Template/js/plugins/datatables/jquery.dataTables.js"></script>
<!-- jQuery UI 1.10.3 -->
<script src="/Scripts/Template/js/jquery-ui-1.10.3.min.js" type="text/javascript"></script>
<!-- Bootstrap -->
<script src="/Scripts/Template/js/bootstrap.min.js" type="text/javascript"></script>
<!-- Morris.js charts -->
<script src="/Scripts/Template/js/raphael-min.js"></script>
<script src="/Scripts/Template/js/plugins/morris/morris.min.js" type="text/javascript"></script>
<!-- Sparkline -->
<script src="/Scripts/Template/js/plugins/sparkline/jquery.sparkline.min.js" type="text/javascript"></script>
<!-- jvectormap -->
<script src="/Scripts/Template/js/plugins/jvectormap/jquery-jvectormap-1.2.2.min.js" type="text/javascript"></script>
<script src="/Scripts/Template/js/plugins/jvectormap/jquery-jvectormap-world-mill-en.js" type="text/javascript"></script>
<!-- jQuery Knob Chart -->
<script src="/Scripts/Template/js/plugins/jqueryKnob/jquery.knob.js" type="text/javascript"></script>
<!-- daterangepicker -->
<script src="/Scripts/Template/js/plugins/daterangepicker/daterangepicker.js" type="text/javascript"></script>
<!-- datepicker -->
<script src="/Scripts/Template/js/plugins/datepicker/bootstrap-datepicker.js" type="text/javascript"></script>
<!-- Bootstrap WYSIhtml5 -->
<script src="/Scripts/Template/js/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js" type="text/javascript"></script>
<!-- iCheck -->
<script src="/Scripts/Template/js/plugins/iCheck/icheck.min.js" type="text/javascript"></script>

<!-- AdminLTE App -->
<script src="/Scripts/Template/js/AdminLTE/app.js" type="text/javascript"></script>

<!-- AdminLTE dashboard demo (This is only for demo purposes) -->
<script src="/Scripts/Template/js/AdminLTE/dashboard.js" type="text/javascript"></script>

<!-- AdminLTE for demo purposes -->
<script src="/Scripts/Template/js/AdminLTE/demo.js" type="text/javascript"></script>

<script src="/Scripts/modernizr-2.6.2.js"></script>

这是我所有的脚本参考

这是表格

    <section class="content">
    <div class="row">
        <div class="col-xs-12">
            <div class="box">
                <br />
                <div class="box-header row-fluid">
                    <div class="col-lg-12">
                        <div class="span2 pull-right">
                            <button class="btn btn-primary btn-sm">Enable</button>
                            <button class="btn btn-warning btn-sm">Disable</button>
                            <button class="btn btn-danger btn-sm">Delete</button>
                        </div>
                    </div>


                </div><!-- /.box-header -->
                <div class="box-body table-responsive">
                    <table id="customers" class="table table-bordered table-striped">
                        <thead>
                            <tr>
                                <th><input type="checkbox"></th>
                                <th>Customer Name</th>
                                <th>Phone Number</th>
                                <th>Email</th>
                                <th>Location</th>
                                <th>Registration Date</th>
                                <th>Customer Status</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <th><input type="checkbox"></th>
                                <td>Mike Ebon</td>
                                <td>0802647281243</td>
                                <td>[e-mail]</td>
                                <td>Surulere Lagos, Country</td>
                                <td>10/13/2014</td>
                                <td><span class="label label-success">Approved</span></td>
                            </tr>
                            <tr>
                                <th><input type="checkbox"></th>
                                <td>Mike Ebon</td>
                                <td>0802647281243</td>
                                <td>[e-mail]</td>
                                <td>Surulere Lagos, Country</td>
                                <td>10/13/2014</td>
                                <td><span class="label label-success">Approved</span></td>
                            </tr>
                            <tr>
                                <th><input type="checkbox"></th>
                                <td>Mike Ebon</td>
                                <td>0802647281243</td>
                                <td>[e-mail]</td>
                                <td>Surulere Lagos, Country</td>
                                <td>10/13/2014</td>
                                <td><span class="label label-danger">Denied</span></td>
                            </tr>
                        </tbody>
                    </table>
                </div><!-- /.box-body -->
            </div><!-- /.box -->
        </div>
    </div>

</section>

【参考方案1】：

在包含 jQuery 的脚本标签之前或之后有这个吗？确保它在之后。

【讨论】：

它之后，但它仍然没有响应

把JS中的jQuery换成$可以吗？

【参考方案2】：

根据 Datatables.net

DataTables 只有一个库依赖项（其他软件依赖于 它依赖于工作） - jQuery。作为一个jQuery插件， DataTables 利用了 jQuery 的许多优秀特性 提供和挂钩到 jQuery 插件系统，方式与 所有其他 jQuery 插件。 jQuery 1.7 或更新版本可以使用 DataTables，尽管通常您会希望使用最新的 版本。 DataTables 包括它需要的所有其他内容 操作。

将您的 jQuery 更新到最新版本，然后重试。同时删除

jQuery(function ($) 
);

在主 JS 中。你不需要它。