javascript - 日期列的列过滤错误

Question

我使用 tablesorter 对列进行排序。

但是我发现了以下问题:

如您所见，第二行没有 16。

该表还有外部搜索字段，如果我输入 16，搜索结果等于 1，因此第二行不显示。

但它看起来像一个表格排序错误。

html 来源:

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

表排序器配置:

$(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
            });
    });

这个问题可以解决吗？

Answer 1

您会看到这里发生了两件事:

1. 当在过滤器中输入的数字不是有效日期时，将进行字符串比较。这就是第一行匹配的原因。

2. 因为第 1 列的 filter_defaultFilter 设置为使用模糊搜索

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

   对字符串值“13.06.2015 21:03”进行模糊搜索会看到“1”后跟“6”(这就是模糊搜索的工作原理)，因此该行也将可见。

我建议删除默认的模糊搜索 ( demo )。