日期列的列过滤错误

时间:2015-06-12 16:13:59

标签: javascript sorting formatting filtering tablesorter

我使用tablesorter对列进行排序。

但我发现了以下问题:

enter image description here

正如您所看到的,第二行没有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
            });
    });

有可能解决这个问题吗?

1 个答案:

答案 0 :(得分:1)

你看到这里发生了两件事:

  1. 的有效日期的过滤器中输入数字时,将进行字符串比较。这就是第一行匹配的原因。
  2. 因为第1列的filter_defaultFilter设置为使用模糊搜索

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

    模糊搜索字符串值&#34; 13.06.2015 21:03&#34;看到&#34; 1&#34;然后是&#34; 6&#34; (那是模糊搜索的工作方式),这样行也可见。

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