jQuery Tablesorter：排序和过滤可编辑列

Question

我在具有可编辑列的表上使用 jQuery Tablesorter，并尝试添加对它们进行过滤和排序的选项，但无法正确排序/过滤它们。

我的桌子：

<div class="table-responsive">
    <table class="table table-bordered tablesort-proof-holder" id="proofTable">
        <thead>
            <tr>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Birthday</th>
                {% for category in categories %}
                    {% if category.type == "BOOL" %}
                        <th class="filter-select">{{ category }}</th> # this is a select with 3 choices
                    {% else %} 
                        <th data-sorter="text">{{ category }}</th> # this is just text
                    {% endif %}
                {% endfor %}
            </tr>
        </thead>
        <tbody>
            {% for person in people %}
                <tr>
                    <td contenteditable="true" class="first_name" maxlength="50">{{ person.first_name }}</td>
                    <td contenteditable="true" class="last_name" maxlength="50">{{ person.last_name }}</td>
                    <td class="date_of_birth"><input type="text" value="{{ person.date_of_birth | date:"d.m.Y" }}" class="pseudo"></td>
                    {% for item in person.item_set.all %}
                        {% if item.category.type == 'TEXT' %}
                            <td contenteditable="true" maxlength="50">{{ item }}</td>
                        {% else %}
                            <td data-category="{{ item.category.pk }}" data-category-type="{{ item.category.type }}">
                                <select class="pseudo">
                                    <option value="Yes" selected>Yes</option>
                                    <option value="No">No</option>
                                    <option value="Unknown">Unknown</option>
                                </select>
                            </td>
                        {% endif %}
                    {% endfor %}
                </tr>
            {% endfor %}
        </tbody>
    </table>
</div>

我的 Tablesorter 选项如下（用咖啡脚本编写）：

defaultOptions =
    dateFormat : "de",
    widgets: ['uitheme', 'filter', 'zebra']
    theme: 'bootstrap'
    headerTemplate : '{content} {icon}',
    widgetOptions: {
      'zebra': ['even', 'odd'],
      'filter_cssFilter': 'form-control',
    }

$('.tablesort-proof-holder').tablesorter $.extend {}, defaultOptions,
      headers: { 0: { sorter: "text" }, 1: { sorter: "text" }, 2: { sorter: "shortDate", dateFormat: "ddmmyyyy" }}

最后 2 列（生日、类别（带有选择选项）或带有文本的类别是我的主要问题。名字/姓氏工作得很好。

如果我在生日列的过滤器中输入任何内容，即使日期相同，我也不会收到任何结果。排序也不起作用，它甚至根本不对列进行排序，只会更改图标。

带有选择选项的类别有点作用。排序正在完成它的工作，但不正确。例如，当我对此列进行排序时，我有 10 个人 3 选择“是”，2 选择“否”，其余的选择“未知”，排序如下：是，是，否，未知，是，否等。过滤器（这是一个选择）没有给我选项“是”、“否”、“未知”它返回了我该类别的 PK（所以我可以选择从 1-10 过滤），它有效，但是不是我所希望的。

带有普通文本的类别根本不起作用。没有排序，没有过滤器，我觉得这很奇怪，因为姓和名（基本相同（除了带有文本的类别可以为空））没有问题。

有人知道我如何修复这 3 种类型的列吗？

Answer 1

全局dateFormat 选项将不接受"de" 的设置，它应该像"ddmmyyyy" 的标题dateFormat 中的值一样设置；因此您可以删除全局设置并将其保留在 headers 选项中。

要使 contenteditable 和 select 正常工作，您需要包含一些小部件和解析器：

• editable widget - 在编辑时管理更改和更新表排序缓存。
• input-select parser（demo） - 还要在选择修改时更新缓存。