简体   繁体   English

.datatable 不是 jquery 中的 function

[英].datatable is not a function in jquery

Below is my jquery code to apply datatable property to HTML table.I've included following js.下面是我的 jquery 代码,用于将数据表属性应用于 HTML 表。我包含以下 js。 I'm getting Error in console that.datatable is not a function.我在控制台中收到错误,即.datatable is not a function。 If I replace jquery.min.js with latest version of js, I'm getting same error.如果我用最新版本的 js 替换 jquery.min.js,我会得到同样的错误。 It is trying to find.datatable function in jquery 2.1.0 js which I've included common layout file.Please advise.它试图在 jquery 2.1.0 js 中找到.datatable function,我已经包含了常见的布局文件。请告知。

  <script src="~/bootstrap-3.3.6-dist/js/jquery.min.js"></script>
  <script src="~/Scripts/jquery.dataTables.min.js"></script>
   <script src="~/Scripts/datatable/DataTables-1.10.20/js/jquery.dataTables.js"></script>
   <script type="text/javascript">
   $(document).ready(function () {
    $("#dtTable").DataTable({
        "processing": true, // for show progress bar
        "serverSide": true, // for process server side
        "filter": true, // this is for disable filter (search box)
        "orderMulti": false, // for disable multiple column at once
        "pageLength": 5,
        "columns": []

    })
})

There are many problems in your code.你的代码有很多问题。

1. Duplicate jQuery 1. 重复 jQuery

You need to remove <script src="~/bootstrap-3.3.6-dist/js/jquery.min.js"></script> because you said you included jQuery 2.1.0 in the common layout page.您需要删除<script src="~/bootstrap-3.3.6-dist/js/jquery.min.js"></script>因为您说您在公共布局页面中包含了 jQuery 2.1.0 。

Including jQuery twice can cause lots of troubles.包含两次 jQuery 会引起很多麻烦。

2. Duplicate DataTables scripts 2. 重复的 DataTables 脚本

You need to remove <script src="~/Scripts/jquery.dataTables.min.js"></script> .您需要删除<script src="~/Scripts/jquery.dataTables.min.js"></script>

If you plan to use the minified version, change its following <script src="~/Scripts/datatable/DataTables-1.10.20/js/jquery.dataTables.js"></script> to <script src="~/Scripts/datatable/DataTables-1.10.20/js/jquery.dataTables.min.js"></script> .如果您打算使用缩小版,请将其以下<script src="~/Scripts/datatable/DataTables-1.10.20/js/jquery.dataTables.js"></script>更改为<script src="~/Scripts/datatable/DataTables-1.10.20/js/jquery.dataTables.min.js"></script>

3. RenderSection() 3. 渲染部分()

I see your asp.net mvc tag.我看到你的asp.net mvc标签。 You need to make sure the jQuery script is loaded before your script placeholder:您需要确保在脚本占位符之前加载 jQuery 脚本:

<body>
    ...
    <script src="YOUR_JQUERY_PATH" />

    @Render.Section("scripts", required: false)
</body>

Then on the page where you want to have additional scripts, they need to be inside "scripts" section:然后在您想要添加其他脚本的页面上,它们需要位于“脚本”部分中:

@{  
    ViewBag.Title = "YOUR_INDIVIDUAL_PAGE";  
}

<!-- YOUR HTML ELEMENTS -->

@section scripts
{
    <script src="YOUR_BOOTSTRAP_SCRIPT_PATH" />
    <script src="YOUR_DATATABLES_SCRIPT_PATH />

    <script type="text/javascript">
        $(function() {
            // Your other jQuery logics
        });
    </script>
}

I would move the Bootstrap script to the layout too, if you plan to use Bootstrap through out the entire site.如果您打算在整个站点中使用 Bootstrap,我也会将 Bootstrap 脚本移动到布局中。


Optionally, you can use bundling and minification in ASP.NET MVC too: https://docs.microsoft.com/en-us/aspnet/mvc/overview/performance/bundling-and-minification或者,您也可以在 ASP.NET MVC 中使用捆绑和缩小: https://docs.microsoft.com/en-us/aspnet/mvc/overview/performance/bundling-and-minification

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM