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

Question

我在带有 editable 列的 table 上使用 jQuery Tablesorter，并尝试添加选项来过滤和排序它们，但它无法排序/过滤他们正确。

我的table:

<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 列（生日、类别（带有 Select 选项）或带有文本的类别是我的主要问题。名字/姓氏工作得很好。

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

带有 select 选项的类别有点用。排序正在完成它的工作，但不正确。例如，我有 10 个人 3 select "Yes"，2 个人 "No"，其余的 "Unknown" 当我对这一列进行排序时，排序就像：是，是，否, Unknown, Yes, No etc. 并且过滤器（是 select）没有给我选项 "Yes", "No", "Unknown" 它返回给我的 PK类别（所以我可以选择从 1-10 进行过滤），这很有效，但不是我所希望的。

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

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

Answer 1

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

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

editable widget - 管理更改并在编辑时更新表格排序器缓存。
input-select parser (demo)- 在修改 select 时也更新缓存。

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

jQuery Tablesorter: sort and filter editable columns

sorting

django

jquery

tablesorter

coffeescript