Question

我正在尝试为我的MVC项目做一个最简单的表排序，并在这里找到了这个很好的引用jQuery table sort，虽然它似乎对我不起作用:(那里还有一个JsFiddle测试当然有效（http://jsfiddle.net/gFzCk）但我的不会。

这是我试图排序的表格。

<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>&nbsp;Create&nbsp;</button></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</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> &nbsp;
                    <a href='@Url.Action("Details", "Project", new { id = item.ProjectID })'><img src='@Url.Content("~/Content/images/Details16x16.png")' title="Details" /></a> &nbsp;
                    <a href='@Url.Action("Delete", "Project", new { id = item.ProjectID })'><img src='@Url.Content("~/Content/images/Delete16x16.png")' title="Delete" /></a> &nbsp;
                    <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>&nbsp;Create&nbsp;</button></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</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> &nbsp;
            <a href='/Project/Details/1'><img src='/Content/images/Details16x16.png' title="Details" /></a> &nbsp;
            <a href='/Project/Delete/1'><img src='/Content/images/Delete16x16.png' title="Delete" /></a> &nbsp;
            <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> &nbsp;
            <a href='/Project/Details/2'><img src='/Content/images/Details16x16.png' title="Details" /></a> &nbsp;
            <a href='/Project/Delete/2'><img src='/Content/images/Delete16x16.png' title="Delete" /></a> &nbsp;
            <a href='/Project/Select/2' class="select"  ><img src='/Content/images/Select16x16.png' title="Select"  /></a> 
        </td>
    </tr>
</table>

Answer 1

在这种情况下，您似乎错过了对排序库的引用，请尝试在主script标记之前使用jQuery用法添加：

<script type="text/javascript" src="https://raw.github.com/padolsey/jQuery-Plugins/master/sortElements/jquery.sortElements.js"></script>

MVC最简单的表排序

1 个答案: