jQuery Tablesorter：对可编辑列进行排序和筛选

我在一个具有可编辑列的表上使用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>

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

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

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

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

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

全局选项将不接受设置为

“de”

，它应该像

“ddmmyyyy”

的标题

日期格式中的值那样设置；因此您可以删除全局设置，并将其保留在
标题
选项中

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


-在编辑时管理更改和更新tablesorter缓存
（）-在修改选择时也更新缓存
嘿，莫蒂，谢谢你的回复。我尝试了你的建议，遗憾的是它仍然不起作用。即使我从默认选项中删除“de”并使用
分类器：“shortDate”，日期格式：“ddmmyyyy”，日期也不会排序或过滤"
在我的标题中。但可编辑小部件可能帮助我找出了问题所在。我们没有使用您的小部件进行单元格编辑，而是创建了自己的javascript来处理所有事情，因此我可能必须首先重新生成表并使用可编辑小部件。尽管前两列只起作用仍然很奇怪好的
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" }}