【问题标题】:Wrong column filtering for date column日期列的错误列过滤
【发布时间】:2015-08-28 17:42:19
【问题描述】:

我使用 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
            });
    });

这个问题可以解决吗?

【问题讨论】:

  • 嗨,嗯,还不确定是什么错误,因为当我在本地电脑上尝试它时它可以工作。你能检查开发者控制台看看是否有错误。更好的是,你能为这个错误创建一个小提琴吗?

标签: javascript sorting formatting filtering tablesorter


【解决方案1】:

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

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

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

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

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

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2021-12-04
    • 1970-01-01
    • 2020-08-03
    • 1970-01-01
    • 2020-04-16
    • 2018-11-14
    • 2019-11-20
    相关资源
    最近更新 更多