Как использовать Tablesorter для Select?

Я пытаюсь использовать tablesorter.js для сортировки столбца по полю выбора. Я не могу заставить его работать, и я пробовал почти все, что написано здесь или в документации. Хотел узнать, может ли кто-нибудь помочь мне с этим.

Я использую Django, что не должно иметь значения, я думаю, но вот HTML и JS:

HTML:

                      <tr>
                        <th></th>
                        <th></th>
                        <th></th>
                        {% if perms.directors.director %}
                            <th></th>
                        {% endif %}
                        <td class="">     
                            <select  class="" >
                                <option value=""></option>
                                <option value="Incomplete">Incomplete</option>
                                <option value="Submitted">Submitted</option>
                                <option value="OnHold">OnHold</option>
                                <option value="Qualified">Qualified</option>
                                <option value="Denied">Denied</option>
                            </select>
                        </td>
                    </tr>
                </thead>
                <tbody>
                    {% for org in object_list %}
                    <tr class="{{ forloop.counter|divisibleby:2|yesno:"even,odd" }}">
                        <td><a href="{{ org.get_absolute_url }}">{{ org.name }}</a></td>
                        <td>{{ org.submission_date | date:"Y/m/d" }}</td>
                        <td>{{ org.updated_date | date:"Y/m/d" }}</td>
                        {% if perms.directors.director %}
                            <td>{{ org.review_note_date | date:"Y/m/d" }}</td>
                        {% endif %}
                        <td>
                    
                            <span class="label {{  org.bootstrap_color_state }}">
                            {{ org.pretty_state }}</span>
                        </td>
                        <td>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>

JS:

  $('.table').each(function () {
    var $table;
    $table = $(this);

    $table.find('a').not('.btn').closest('td, th').css({
        'padding': 0
    });

    $table.find('.amount').addClass('text-right');

    // Adds tablesorter plugin to .table, so to sort on <th>s
    $table.tablesorter().addClass('tablesorter');
    

    

    // Add up/down arrows to indicate which order column data is displayed
    $table.bind('sortEnd', function (event, table) {
        $(table).find('.glyphicon').remove();
        $(table).find('.tablesorter-headerAsc > div').append('<span class="glyphicon glyphicon-chevron-up" />');
        $(table).find('.tablesorter-headerDesc > div').append('<span class="glyphicon glyphicon-chevron-down" />');
    });

});

Вернуться на верх