jQuery Tablesorter: сортировка и фильтрация редактируемых столбцов - PullRequest
0 голосов
/ 20 сентября 2018

Я использую 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>

Параметры My 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" }}

Последние две колонки (День рождения, Категория (с опциями выбора) ИЛИ Категория с текстом - моя главная проблемаИмя / Фамилия работает отлично.

Если я введу что-либо в фильтр столбца дня рождения, я не получу никакого результата, даже если дата совпадает. Сортировка также не работает, она работаетдаже не сортирует столбец, только меняет значок.

Категория с опциями выбора работает немного. Сортировка выполняет свою работу, но не правильно. Например, у меня было 10 человек 3 с выбором "Да ", 2 с" Нет ", а остальные" Неизвестно ", когда я сортировал этот столбец, сортировка была такой: Да, Да, Нет, Неизвестно, Да, Нет и т. Д. И фильтр (который является выбором) не дал мнеопцияs «Да», «Нет», «Неизвестно» он вернул мне ПК категории (так что у меня были варианты от 1 до 10), который работал, но не то, на что я надеялся.

Категория с обычным текстом вообще не работает.Без сортировки, без фильтра, что я нахожу странным, поскольку фамилия и имя (которые в основном совпадают (за исключением того, что категория с текстом МОЖЕТ быть пустой)) работают без проблем.

Кто-нибудь знает, как я могисправить эти 3 типа столбцов?

1 Ответ

0 голосов
/ 21 сентября 2018

Глобальная опция dateFormat не будет принимать настройку "de", она должна быть установлена ​​как значение в заголовках dateFormat из "ddmmyyyy";так что вы можете удалить глобальную настройку и оставить ее в опции headers.

Чтобы получить contenteditable и выбрать работать, вам нужно будет включить несколько виджетов и парсеров:

...