jQuery tableSorter 不排序前两行答案

【问题标题】：jQuery tableSorter not sorting first two rowsjQuery tableSorter 不排序前两行
【发布时间】：2012-05-05 07:24:20
【问题描述】：

我正在使用带有 MVC 3 和 html 助手的 tablesorter 来填充 a for 每个循环中的列，这些循环通过对象中的项目。这工作正常，我的 html 表正在按照我想要的方式填充。但我在对员工姓名进行排序时遇到问题，这是表格中的第二列，如下所示：

                <td class="reviewedEmployee">
                    @Html.TextBox("Employees", item.FirstName + "  " + item.LastName, new { style = "width:auto !important; text-align:center;" })
                </td>

当我单击格式正确以使用表格排序器的“员工”标题时，没有排序发生。但是，当我单击另一列时，例如“审阅者列表”（这是选择列表中的 @Html.ListBox），它会按该列排序。我可以单击返回到“员工”标题，它会进行更改，但它们不是按字母顺序排列的（名字 + 姓氏）。排序也不适用于第一列“年份”，它只显示 2011 年或 2012 年。

这是我的 JS：

    $(document).ready(function () {
        $('table.tablesorter').tablesorter({ textExtraction: 'complex' })
          .tablesorterPager({ container: $("#pager"), size: $(".pagesize option:selected").val() });
});

我尝试删除“Employee”列数据中的空格，并从 tablesorter 中删除了“textExtaction”属性。还有其他想法吗？

更新： 我的表格中的数据是输入标签，所以我需要找出如何按值排序，可能通过添加 tablesorter.AddParser() 方法来返回单元格 .val( ) 在输入标签内。

【问题讨论】：

请添加一些呈现的表格 HTML...
请参阅下面的答案以获取我的修复。我最终不需要@Html.TextBoxFor() 而是使用@item.property 来获取原始HTML 文本字段。如上所述，我的表具有正确的语法，但 tablesorter 在对 value 属性进行排序时似乎不喜欢渲染的输入标签。我确实为 tablesorter 制作了一个自定义解析器，以便对 value 属性进行排序，但它仍然不起作用。

标签： jquery asp.net-mvc asp.net-mvc-3 html-helper

【解决方案1】：

我没有使用 razor 视图呈现的 input 标记，而是使用 HTML 助手从数据库中获取名字和姓氏，这些名字和姓氏在表格中以原始文本的形式出现。由于某种原因，tablesorter 无法对任何有输入的行进行排序。

修复：在同一个隐藏字段中添加一个设置为可见字段值的隐藏字段。

我的解决方法：获得原始文本后，我实现了自己的自定义解析器设置，以按姓氏对列进行排序。

    $.tablesorter.addParser({
    id: "lastName",
    is: function (s) {
        return false;
    },
    format: function (s) {
        ret = s.split(' ');
        return ret[ret.length-1]
    },
    type: "text"
});

此外，我在原始 HTML 中添加了 span 标签以提供样式和其他属性，例如在 jQuery 中选择的类以在提交新数据时更新表。见下文：

        //if data is changed, trigger an update on the text boxes to make sure filtering is up to date. 'allocation' is any dynamic field in a row such as textbox
    $(".allocation").change(function () {
        $("#manageReviewsTable").trigger("update");
        $("#manageReviewsTable").trigger("appendCache");
    });

有任何问题，请在下方评论！

【讨论】：