0

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

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

_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>
4

3 回答 3

1

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

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

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

$('#customerIndex').dataTable({ "sScrolly": "200px", "bPaginate": false });
于 2013-07-31T14:19:07.570 回答
0

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

于 2013-07-31T14:53:21.663 回答
0

你加载了两个不同的 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 });
                });
于 2013-07-31T13:54:46.517 回答