Я пытаюсь сделать следующий эффект, строки уже присутствуют на странице, так что я думаю, что-то с синтаксисом jquery, но я пока не очень умен в jquery.
http://kobikobi.wordpress.com/2008/09/15/using-jquery-to-filter-table-rows/
Это просто не работает, и да, библиотеки jquery включены.
Filter: <input type="text" id="FilterTextBox" name="FilterTextBox" />
<script language="javascript" type="text/javascript">
$(document).ready(function () {
//add index column with all content.
$(".filterable tr:has(td)").each(function () {
var t = $(this).text().toLowerCase(); //all row text
$("<td class='indexColumn'></td>")
.hide().text(t).appendTo(this);
}); //each tr
$("#FilterTextBox").keyup(function () {
var s = $(this).val().toLowerCase().split(" ");
//show all rows.
$(".filterable tr:hidden").show();
$.each(s, function () {
$(".filterable tr:visible .indexColumn:not(:contains('"
+ this + "'))").parent().hide();
}); //each
}); //key up.
}); //document.ready
</script>
<table class="filterable">
<tr>
<th>
name
</th>
<th>
yearsExperienceRequired
</th>
<th>
Actions
</th>
<th>
Index Column
</th>
</tr>
@foreach (var item in Model) {
<tr class="indexColumn">
<td>
@Html.DisplayFor(modelItem => item.name)
</td>
<td>
@Html.DisplayFor(modelItem => item.yearsExperienceRequired)
</td>
<td>
@Html.DisplayFor(modelItem => item.name)
</td>
<td>
@Html.ActionLink("Edit", "Edit", new { id=item.PositionID }) |
@Html.ActionLink("Details", "Details", new { id = item.PositionID }) |
@Html.ActionLink("Delete", "Delete", new { id = item.PositionID })
</td>
</tr>
}
</table>
Сгенерированный HTML-код следующий,
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Index</title>
<link href="/Content/Site.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="page">
<header>
<div id="title">
<h1>Eva 1.0</h1>
</div>
<div id="logindisplay">
Welcome <strong>eva</strong>!
[ <a href="/Account/Register">Register New User</a> ]
[ <a href="/Account/LogOff">Log Off</a> ]
[ <a href="/Account/ChangePassword">Change Password</a> ]
</div>
<nav>
<ul id="menu">
<li> <a href="/">DashBoard</a></li>
<li> <a href="/Position">Positions</a> </li>
<li> <a href="/UserPositionPosition/Position">Prospects</a> </li>
<li> <a href="/UserPositionPosition/Position">Prospect History</a> </li>
<li> <a href="/UserPositionPosition/Position">Technical Interview</a> </li>
<li> <a href="/UserPositionPosition/Position">Manager Interview</a> </li>
<li> <a href="/UserPositionPosition/Position">Current Employees</a> </li>
<li> <a href="/UserPositionPosition/Position">Current Employees History</a> </li>
</ul>
</nav>
</header>
<section id="main">
<h2>Index</h2>
<p>
<a href="/Position/Create">Create New</a>
</p>
Filter: <input type="text" id="FilterTextBox" name="FilterTextBox" />
<script language="javascript" type="text/javascript">
$(document).ready(function () {
//add index column with all content.
$(".filterable tr:has(td)").each(function () {
var t = $(this).text().toLowerCase(); //all row text
$("<td class='indexColumn'></td>").hide().text(t).appendTo(this);
}); //each tr
$("#FilterTextBox").keyup(function () {
var s = $(this).val().toLowerCase().split(" ");
//show all rows.
$(".filterable tr:hidden").show();
$.each(s, function () {
$(".filterable tr:visible .indexColumn:not(:contains('"+ this + "'))").parent().hide();
}); //each
}); //key up.
}); //document.ready
</script>
<table class="filterable">
<tr>
<th>
name
</th>
<th>
Years of Experience Required
</th>
<th>
Index Column
</th>
<th>
Actions
</th>
</tr>
<tr class="indexColumn">
<td>
.net developer
</td>
<td>
5
</td>
<td>
.net developer
</td>
<td>
<a href="/Position/Edit/1">Edit</a> |
<a href="/Position/Details/1">Details</a> |
<a href="/Position/Delete/1">Delete</a>
</td>
</tr>
<tr class="indexColumn">
<td>
java developer
</td>
<td>
5
</td>
<td>
java developer
</td>
<td>
<a href="/Position/Edit/2">Edit</a> |
<a href="/Position/Details/2">Details</a> |
<a href="/Position/Delete/2">Delete</a>
</td>
</tr>
</table>
</section>
<footer>
</footer>
</div>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js" type="text/javascript"></script>
<script src="http://ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.validate.unobtrusive.min.js" type="text/javascript"></script>
</body>
</html>