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

0

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 });
                });
于 2013-07-31T13:54:46.517 に答える
0

ページの下部に余分なスクリプト src="/Scripts/jquery-2.0.2.js" がありました.....

于 2013-07-31T14:53:21.663 に答える