Question

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

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

未捕获的ReferenceError：jQuery未定义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>mike@yahoo.com</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>mike@yahoo.com</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>mike@yahoo.com</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>

Answer 1

在包含jQuery的脚本标记之前或之后，您有吗？确保它在之后。

Answer 2

根据Datatables.net

DataTables仅具有一个库依赖关系（其他软件依赖于它依赖于工作）-jQuery。作为jQuery插件， DataTables利用了jQuery的许多出色功能提供并挂钩到jQuery插件系统，方法与所有其他jQuery插件。 jQuery 1.7或更高版本可以使用 DataTables，尽管通常情况下您会希望使用最新的版。 DataTables包含它所需的其他所有内容操作。

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

jQuery(function ($) {
});

在主JS中。您不需要它。

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

2 个答案: