Question

我正在使用＆＃34; jquery.tablesorter.widgets.js＆＃34;对于Table过滤器工作正常，但我必须显示＆＃34;没有找到数据＆＃34;当根据搜索条件无法获得记录时。

这是我的代码。

HTML代码：

         <tr>
                <td class="filter-false" width="3%" style="background: #5e5c5c; color: #fff; vertical-align: middle; font-size: 12px; font-weight: bold"></td>
                <th class="txt1" style="text-decoration: underline; cursor: pointer">Domain</th>
                <th style="text-decoration: underline; cursor: pointer">Registrant Name</th>
                <th class="filter-select" data-placeholder="Select" style="text-decoration: underline; cursor: pointer">Account Id</th>
                <th style="text-decoration: underline; cursor: pointer">Expiry Date</th>
                <th style="text-decoration: underline; cursor: pointer">Renewal Date</th>
                <th style="text-decoration: underline; cursor: pointer">Email ID</th>
                <th class="filter-false" style="text-decoration: underline; cursor: pointer">Status</th>
            </tr>

Javascript代码：

              $(document).ready(function () {

    $("#yui").tablesorter({

        // headers: { 0: { sorter: false }, 1: { sorter: false }, 2: { sorter: false }, 3: { sorter: false }, 4: { sorter: false }, 5: { sorter: false } },
        widthFixed: false,

        // initialize zebra striping and filter widgets
        widgets: ["zebra", "filter"],

        // headers: { 5: { sorter: false, filter: false } },

        widgetOptions: {

            // extra css class applied to the table row containing the filters & the inputs within that row
            filter_cssFilter: '',

            // visible; default is false
            filter_childRows: false,

            filter_ignoreCase: true,

            filter_reset: '.reset',

            filter_saveFilters: true,

            filter_searchDelay: 300,

            filter_startsWith: false,

            filter_hideFilters: false,

            filter_functions: {

            }
        }
    })
    .tablesorterPager({ container: $("#pagerOne"), positionFixed: false, size: 10 })
});

我必须显示＆＃34;没有找到数据＆＃34;消息作为表中的行。

Answer 1

您可以使用内置的showError function（v2.15 +）并绑定一些事件，如下所示（demo）：

$(function () {

    $("#yui")
    .on('filterEnd filterReset pagerComplete', function(e, table){
        var fr, table = this;
        if (table.config.pager) {
            $.tablesorter.showError(table);
            fr = table.config.pager.filteredRows;
            if (fr === 0) {
                $.tablesorter.showError(table, "No Data Found");
            }
        }
    })
    .tablesorter({
        theme: 'blue',
        widthFixed: false,
        widgets: ["zebra", "filter"],
        widgetOptions: {
            filter_cssFilter: '',
            filter_childRows: false,
            filter_ignoreCase: true,
            filter_reset: '.reset',
            filter_saveFilters: true,
            filter_searchDelay: 300,
            filter_startsWith: false,
            filter_hideFilters: false,
            filter_functions: {}
        }
    })
    .tablesorterPager({
        container: $(".pager"),
        positionFixed: false,
        size: 10
    });

});

注意，事件绑定需要在寻呼机初始化之前发生。还需要简短的setTimeout，因为在filteredRows事件之后，寻呼机filterEnd计数不会立即更新。

~~我需要修复pagerChange event以确保在每次寻呼机更改后触发，而不仅仅是“页面”更改，因此您只需要绑定到一个不需要时间的事件延迟~~

更新：更改了代码以使用pagerComplete event，因此不需要setTimeout。

具有空数据的TableFilter插件

1 个答案: