数据表未在 MVC 项目中的我的表上呈现答案

【问题标题】：Datatables not rendering on my table in MVC project数据表未在 MVC 项目中的我的表上呈现
【发布时间】：2013-07-31 13:42:25
【问题描述】：

我想改善我的表格的外观和感觉，jQuery 数据表看起来很适合这样做，但我不知道为什么它没有在我的表格上呈现。我已经在我的捆绑配置中正确注册了插件。遵循教程并确保一切都在正确的位置，但没有效果。

这是我从浏览器生成的代码。我已经在调用dataTable() 的 JavaScript 中添加了一个警报，正在调用它。

文档的头部和正文位于与我的表格所在的索引页不同的文件_layout.cshtml 中。并不是说这会影响任何事情。

<!DOCTYPE html>
<html lang="en">
    <head> 
        <meta charset="utf-8" />
        <title></title>

        <link href="/favicon.ico" rel="shortcut icon" type="image/x-icon" />
        <meta name="viewport" content="width=device-width" />
        <link href="/Content/site.css" rel="stylesheet"/>

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

        <script src="/Content/DataTables-1.9.4/media/css/demo_table.css"></script>

        <script src="/Scripts/DataTables-1.9.4/media/js/jquery.js"></script>
    <script src="/Scripts/DataTables-1.9.4/media/js/jquery.dataTables.js"></script>
    </head>
    <body>
        <header>
            <div class="content-wrapper">
                <div class="float-left">
                    <p>
                       <a class="site-title" href="/">
                       <img src="../../Content/Images/TrakMan_white240.png" ,alt="sort",    style="border-style:none"/></a>
                    </p>
                </div>
                <div class="float-right">
                    <section id="login">
                        Hello, <a class="username" href="/SGAccount/Manage" title="Manage">simon</a>!
                        <form action="/SGAccount/LogOff" id="logoutForm" method="post">
                            <input     name="__RequestVerificationToken" type="hidden"   value="qouuJJI98XkICybk1UEozbZayptmhHh1zgsHQfTcu9kz6PJrZ_TObkO8Yhkkqv06jtklWRKOSAhUs3w1Bqm58Y-cy7Q8I5dl_loxDuU6AqReCRtWRHg7p4ipeTVKzNzGG50b7D-x3562Hj2q2In_m-LctFmsLIQ1qpM_iYv0MSQ1"   />
                            <a href="javascript:document.getElementById('logoutForm').submit()">Log    off</a>
                        </form>    
                    </section>
                    <nav>
                        <ul id="menu">
                            <li><a href="/">Home</a></li>
                            <li><a href="/Home/About">About</a></li>
                            <li><a href="/Home/Contact">Contact</a></li>
                            <br />
                            <br />
                            <br />
                            <li><a href="/SGAccount/ChangePassword">Change Password</a></li>
                            <li><a href="/Home/Welcome">Servers</a></li>  
                            <li><a href="/SecurityGuard">Security Guard</a></li>
                            <li><a href="/Connection">Connections</a></li>
                        </ul>
                    </nav>
                </div>
            </div>
        </header>
        <div id="body">
            <section class="content-wrapper main-content clear-fix">
                <script src="/Scripts/jquery-2.0.2.js"></script>

                <script type="text/javascript">
                    $(document).ready(function () {
                        var el = doucument.getElementByName("customerIndex")
                        el.dataTable({ "sScrolly": "200px", "bPaginate": false });
                    });
                </script>


                <h2>Customers</h2>

                <p>
                    <a class="createButton" href="/Customer/Create">Create New</a>
                </p>

                <table id="customerIndex" class="display">
                <thead>
                    <tr>
                        <th>Column 1</th>
                        <th>Column 2</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Row 1 Data 1</td>
                        <td>Row 1 Data 2</td>
                    </tr>
                    <tr>
                        <td>Row 2 Data 1</td>
                        <td>Row 2 Data 2</td>
                    </tr>
                </tbody>
                </table>
            </section>
        </div>
    </body>
</html>

【问题讨论】：

你能在控制台上发布你遇到的错误吗？
Uncaught TypeError: Object [object Object] has no method 'dataTable'
检查你的 dataTable.js 的引用

标签： html asp.net-mvc datatables

【解决方案1】：

有几个问题：您的代码显示“var el = doucument...”，但应该是“文档”。

当您的表没有设置名称属性时，您还使用“getElementByName”，只有 ID 设置。

但是为什么不使用内置的 jQuery 函数来按 ID 选择：

$('#customerIndex').dataTable({ "sScrolly": "200px", "bPaginate": false });

【讨论】：

【解决方案2】：

你加载了两个不同的 jquery 版本：

<script src="/Scripts/DataTables-1.9.4/media/js/jquery.js"></script> // in the header
<script src="/Scripts/jquery-2.0.2.js"></script> // in the body

另一个小修正：

<script src="/Content/DataTables-1.9.4/media/css/demo_table.css"></script>
// should be
<link href="/Content/DataTables-1.9.4/media/css/demo_table.css" rel="stylesheet" />

也许这会纠正你的错误

编辑：
改变

                $(document).ready(function () {
                    var el = doucument.getElementByName("customerIndex")
                    el.dataTable({ "sScrolly": "200px", "bPaginate": false });
                });

到

                $(document).ready(function () {
                    $("#customerIndex").dataTable({ "sScrolly": "200px", "bPaginate": false });
                });

【讨论】：

我已经删除了额外的 jquery 调用，并将 css 更改为正确的链接，但仍然说 object has no Object [object Object] has no method 'dataTable'。
查看编辑了解更多更改（dataTable 方法仅适用于 jQuery 对象）
我试过 var el = doucument.getElementByName("customerIndex") 这种方式，因为我认为螨虫在这里是个问题，我已将其改回建议。

【解决方案3】：

有一个额外的脚本 src="/Scripts/jquery-2.0.2.js" 在页面底部.....

【讨论】：