1
我試圖做一個簡單的可能的表格排序爲我的MVC項目，並在這裏發現了這個很好的參考jQuery table sort，儘管它似乎並沒有爲我工作:(有一個的jsfiddle測試有作爲當然（http://jsfiddle.net/gFzCk）的該作品，但我的不會。MVC最簡單的表格排序
這是我試圖對錶進行排序。
<table id="projectTable">
<thead>
<tr>
<th id="name_header">
Name
</th>
<th id="author_header">
Author
</th>
<th>
Date Created
</th>
<th>
Date Edited
</th>
<th style="text-align:right;"> <a href="@Url.Action("Create", "Project")"><button> Create </button></a> </th>
</tr>
</thead>
<tbody>
@foreach (var item in Model) {
var id = item.ProjectID;
<tr id='@id' class="trow @if (System.Web.HttpContext.Current.Session["_SelectedProject"].ToString() == "System.Object") { <text>none</text> }
else
{ if (id == (int)System.Web.HttpContext.Current.Session["_SelectedProjectID"]) {<text>highlighted</text> }}">
<td>
@Html.DisplayFor(modelItem => item.Name)
</td>
<td>
@Html.DisplayFor(modelItem => item.Author)
</td>
<td>
@Html.DisplayFor(modelItem => item.DateCreated)
</td>
<td>
@Html.DisplayFor(modelItem => item.DateEdited)
</td>
<td>
<a href='@Url.Action("Edit", "Project", new { id = item.ProjectID })'><img src='@Url.Content("~/Content/images/Edit16x16.png")' title="Edit"/></a>
<a href='@Url.Action("Details", "Project", new { id = item.ProjectID })'><img src='@Url.Content("~/Content/images/Details16x16.png")' title="Details" /></a>
<a href='@Url.Action("Delete", "Project", new { id = item.ProjectID })'><img src='@Url.Content("~/Content/images/Delete16x16.png")' title="Delete" /></a>
<a href='@Url.Action("Select", "Project", new { id = item.ProjectID })' class="select" ><img src='@Url.Content("~/Content/images/Select16x16.png")' title="Select" /></a>
</td>
</tr>
}
</tbody>
</table>
這是我的JQuery使用。
<script type="text/javascript">
var table = $('#projectTable');
$('#name_header, #author_header')
.wrapInner('<span title="sort this column"/>')
.each(function() {
var th = $(this),
thIndex = th.index(),
inverse = false;
th.click(function() {
table.find('td').filter(function() {
return $(this).index() === thIndex;
}).sortElements(function (a, b) {
return $.text([a]) > $.text([b]) ?
inverse ? -1 : 1
: inverse ? 1 : -1;
}, function() {
return this.parentNode;
});
inverse = !inverse;
});
});
</script>
我已經測試它是否運行腳本或沒有，它不，它只是將不會對其進行排序...
HTML標記
我刪除tbody和thead。
<table id="projectTable">
<tr>
<th id="name_header">
Name
</th>
<th id="author_header">
Author
</th>
<th>
Date Created
</th>
<th>
Date Edited
</th>
<th style="text-align:right;"> <a href="/Project/Create"><button> Create </button></a> </th>
</tr>
<tr id='1' class="trow none ">
<td>
Project 1
</td>
<td>
Me
</td>
<td>
8/24/2012 7:08:49 PM
</td>
<td>
8/24/2012 7:08:49 PM
</td>
<td>
<a href='/Project/Edit/1'><img src='/Content/images/Edit16x16.png' title="Edit"/></a>
<a href='/Project/Details/1'><img src='/Content/images/Details16x16.png' title="Details" /></a>
<a href='/Project/Delete/1'><img src='/Content/images/Delete16x16.png' title="Delete" /></a>
<a href='/Project/Select/1' class="select" ><img src='/Content/images/Select16x16.png' title="Select" /></a>
</td>
</tr>
<tr id='2' class="trow none ">
<td>
Test Project 2
</td>
<td>
Me
</td>
<td>
8/27/2012 5:42:32 PM
</td>
<td>
8/27/2012 5:42:32 PM
</td>
<td>
<a href='/Project/Edit/2'><img src='/Content/images/Edit16x16.png' title="Edit"/></a>
<a href='/Project/Details/2'><img src='/Content/images/Details16x16.png' title="Details" /></a>
<a href='/Project/Delete/2'><img src='/Content/images/Delete16x16.png' title="Delete" /></a>
<a href='/Project/Select/2' class="select" ><img src='/Content/images/Select16x16.png' title="Select" /></a>
</td>
</tr>
</table>
有你確信沒有調試控制檯（Internet Explorer = F12和Chrome = CTRL + SHIFT + J）中的腳本錯誤，也請嘗試在您的呈現標記上查看源代碼，並用生成的標記替換您的jsFiddle。 –
是的，我猜你正在做點什麼。調試控制檯顯示了此。 'Uncaught TypeError：Object [object Object] has no method'sortElements'' 此外，我已經試過用我的標記，工作正常。 – rexdefuror
我可能會添加，我正在使用最新的JQuery。 – rexdefuror