Wrong column filtering for date column

Question

I use tablesorter to sort columns.

But I found the following issue:

As you can see the second row doesn't have 16.

This table also have the external search field and search result equals 1 if I type 16, thus second row doesn't show.

But it lools like a tablesorter bug.

html source:

<table id="table" class="tablesorter sortable tablesorter-blue hasFilters" role="grid" aria-describedby="table_pager_info"><colgroup class="tablesorter-colgroup"><col style="width: 5.2%;"><col style="width: 14.4%;"><col style="width: 14.4%;"><col style="width: 14.1%;"><col style="width: 12.5%;"><col style="width: 10.7%;"><col style="width: 13.1%;"><col style="width: 8.7%;"></colgroup>
                    <thead>
                    <tr role="row" class="tablesorter-headerRow">
                            ....
                    </tr>
                    <tr role="row" class="tablesorter-filter-row tablesorter-ignoreRow"><td><input type="search" placeholder="" class="tablesorter-filter disabled" data-column="0" disabled="" data-lastsearchtime="1434125033081"></td><td><input type="search" placeholder="Искать..." class="tablesorter-filter" data-column="1" data-lastsearchtime="1434125097454"></td><td><input type="search" placeholder="Искать..." class="tablesorter-filter" data-column="2" data-lastsearchtime="1434125046223"></td><td><input type="search" placeholder="Искать..." class="tablesorter-filter" data-column="3" data-lastsearchtime="1434125033081"></td><td><input type="search" placeholder="Искать..." class="tablesorter-filter" data-column="4" data-lastsearchtime="1434125033081"></td><td><input type="search" placeholder="Искать..." class="tablesorter-filter" data-column="5" data-lastsearchtime="1434125033081"></td><td><input type="search" placeholder="Искать..." class="tablesorter-filter" data-column="6" data-lastsearchtime="1434125033081"></td><td><input type="search" placeholder="Искать..." class="tablesorter-filter" data-column="7" data-lastsearchtime="1434125033081"></td></tr></thead>
                    <tbody aria-live="polite" aria-relevant="all">                    
                    <tr class="blue odd" role="row">
                            <td class="">
                                <a href="currentCompany/campaignDetails/350">1</a>

                                <div class="line">

                                </div>
                            </td>
                            <td class="startDate">16.06.2015 19:01</td>
                            <td class="">17.06.2015 19:04</td>
                            <td class="">1</td>
                            <td class="">1,44</td>
                            <td class="" id="stateDiv350">Создана</td>
                            <td class="">IN_PROGRESS

                            </td>
                            <td class="">
                                ...
                            </td>
                        </tr><tr class="blue even" role="row">
                            <td class="">
                                <a href="currentCompany/campaignDetails/351">2</a>

                                <div class="line">

                                </div>
                            </td>
                            <td class="startDate">13.06.2015 21:03</td>
                            <td class="">15.06.2015 19:01</td>
                            <td class="">1</td>
                            <td class="">2,70</td>
                            <td class="" id="stateDiv351">Создана</td>
                            <td class="">IN_PROGRESS

                            </td>
                            <td class="">
                                ...
                            </td>
                        </tr></tbody>
                </table>

table sorter configuration:

$(function () {
        var $table = $('#table')
            .tablesorter({
                headers: { 0: { filter: false} },
                sortList: [[1,1]],   // sorting(desc) by column with index 1
                dateFormat:'ddmmyyyy',
                theme: 'blue',
                widthFixed: true,
                headerTemplate: '{content} {icon}',
                widgets: ['zebra', 'filter'],
                widgetOptions: {
                    zebra: ["even", "odd"],
                    // filter_anyMatch replaced! Instead use the filter_external option
                    // Set to use a jQuery selector (or jQuery object) pointing to the
                    // external filter (column specific or any match)
                    filter_external: '.search',
                    // add a default type search to the first name column
                    filter_defaultFilter: {1: '~{query}'},
                    // include column filters
                    filter_columnFilters: true,
                    filter_placeholder: {search: 'Искать...'},
                    filter_saveFilters: true,
                    filter_reset: '.reset'
                }
            })
            // needed for pager plugin to know when to calculate filtered rows/pages
            .addClass('hasFilters')
            .tablesorterPager({
                container: $(".table-pager"),
                output: '{page} из {filteredPages} ({filteredRows})',
                size: 5
            });
    });

Is it possible to fix this problem?

Answer 1

You are seeing two things happen here:

1. When entering a number in the filter that is not a valid date, a string comparison is done. So that is why the first row matches.

2. Because the filter_defaultFilter for column 1 is set to use a fuzzy search

   filter_defaultFilter: {1: '~{query}'}
   

   a fuzzy search of the string value "13.06.2015 21:03" sees a "1" followed by a "6" (that's how a fuzzy search works), so that row would also be visible.

I would recommend removing the default fuzzy search (demo).