Search code examples
jquerydjangosortingcoffeescripttablesorter

jQuery Tablesorter: sort and filter editable columns

I'm using the jQuery Tablesorter on a table with editable columns and tried to add the option to filter and sort them, but it fails to sort / filter them correctly.

My 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>

My Tablesorter options are as followed (written in a coffee script):

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" }}

The last 2 columns (Birthday, Category (with Select Options) OR Category with text are my main problem. First Name / Last Name works just fine.

If I type anything into the filter of the birthday column I receive no result, even if the date is the same. The sorting also doesn't work, it does not even sort the column at all, only changes the icon.

The category with select options works a bit. The sorting is doing its job, but not correctly. For example I had 10 People 3 with a select "Yes", 2 with "No" and the rest "Unknown" when I sorted this column the sorting was like: Yes, Yes, No, Unknown, Yes, No etc. And the filter (which is a select) did not give me the options "Yes", "No", "Unknown" it returned me the PK of the category (so I had the options to filter from 1-10), which worked, but wasn't what I was hoping for.

The category with normal text doesn't work at all. No sorting, no filter, which I find weird, since last and first name (which are basically the same (except that the category with text CAN be empty)) work without a problem.

Anyone knows how I could fix those 3 type of columns?

Solution

  • The global dateFormat option will not accept a setting of "de", it should be set like the value in the headers dateFormat of "ddmmyyyy"; so you can remove the global setting and leave the one in the headers option.

    To get the contenteditable & select working, you'll need to include a few widgets & parsers: