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"的设置，它的设置应类似于dateFormat的标题"ddmmyyyy"中的值；因此您可以删除全局设置并将其保留在headers选项中。

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

editable widget-在编辑时管理更改并更新表排序器缓存。
input-select parser（demo）-在修改选择内容时也更新缓存。

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

1 个答案: