テーブルのルック アンド フィールを改善したいのですが、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>