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>

我的表格排序器选项如下(用咖啡脚本编写(：

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选项中。

要使内容可编辑和选择工作，您需要包含一些小部件和解析器：

• 可编辑小部件 - 用于在编辑时管理更改和更新表排序器缓存。
• 输入选择解析器 (demo( - 在修改选择时也更新缓存。