Question

我想通过引用MVC中的相关jquery文件来调用数据表。但是，当我尝试调用dataTable实例时，它会失败。

Chrome浏览器中的错误显示'dataTable（）'函数无法识别，或者有时无法识别jquery或$。

以下是我使用CDN的代码，该代码可以正常工作：

 <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css" />
    <script src="~/Scripts/jquery-3.3.1.min.js"></script>
    <script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>`<div style="width: 900px; border: 1px solid black; padding: 3px">
    <table id="datatable">
        <thead>
            <tr>
                <th>Id</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Gender</th>
                <th>Job Title</th>
                <th>Web Site</th>
                <th>Salary</th>
                <th>Hire Date</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var values in Model)
            {
                <tr>
                    <td>@values.Id</td>
                    <td>@values.FirstName</td>
                    <td>@values.LastName</td>
                    <td>@values.Gender</td>
                    <td>@values.JobTitle</td>
                    <td>@values.WebSite</td>
                    <td>@values.Salary</td>
                    <td>@values.HireDate</td>
                </tr>
            }
        </tbody>
        <tfoot>
            <tr>
                <th>Id</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Gender</th>
                <th>Job Title</th>
                <th>Web Site</th>
                <th>Salary</th>
                <th>Hire Date</th>
            </tr>
        </tfoot>
    </table>
</div>

$（'＃datatable'）。dataTable（）;

现在，如果我调用相同的代码引用从Visual Studio中通过“添加->客户端库”下载的dataTable脚本文件并下载datatable的cdnjs文件，则会失败。

以下代码失败：

<link href="~/lib/datatable/css/datatable.min.css" rel="stylesheet" />`<script src="~/lib/datatable/js/datatable.jquery.min.js"></script>`<script src="~/lib/datatable/js/datatable.min.js"></script>
<div style="width: 900px; border: 1px solid black; padding: 3px">
<table id="datatable">
    <thead>
        <tr>
            <th>Id</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Gender</th>
            <th>Job Title</th>
            <th>Web Site</th>
            <th>Salary</th>
            <th>Hire Date</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var values in Model)
        {
            <tr>
                <td>@values.Id</td>
                <td>@values.FirstName</td>
                <td>@values.LastName</td>
                <td>@values.Gender</td>
                <td>@values.JobTitle</td>
                <td>@values.WebSite</td>
                <td>@values.Salary</td>
                <td>@values.HireDate</td>
            </tr>
        }
    </tbody>
    <tfoot>
        <tr>
            <th>Id</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Gender</th>
            <th>Job Title</th>
            <th>Web Site</th>
            <th>Salary</th>
            <th>Hire Date</th>
        </tr>
    </tfoot>
</table>

<script>
 $('#datatable').dataTable();
</script>

有关如何在MVC 5项目中为数据表引用jquery文件的任何帮助或建议或想法？。

在此先感谢!!! ..

Answer 1

一切似乎都还好。您只需要在文档准备功能中添加调用datatable方法

<script>
$(function(){
  $("#datatable").dataTable();
})
</script>

添加就绪功能后。检查您是否没有两次加载JQuery。（例如，在_Layout.cshtml页面中进行检查。）如果是，则从视图中删除jquery引用。

还要确保您引用的是有效的datatable.js路径。

Answer 2

您应将jQuery版本更改为jQuery 1.11.3

https://datatables.net/blog/2015-04-30

仅通过CDN引用的Jquery数据表不适用于脚本文件

2 个答案: