TableFilter插件空数据(TableFilter Plugin with Null Data

我使用“jquery.tablesorter.widgets.js”为表过滤器工作正常，但我一定要显示在基于搜索条件无法记录“没有找到数据”。

这里是我的代码。

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

我要显示“未找到资料”的消息在表行。

您可以使用内置的showError功能（2.15版+）并绑定到如下几个事件（演示）：

$(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事件，以确保它激发每个寻呼机变化后，不仅仅是一个“页”的变化，所以你会那么只需要绑定到一个事件，并不需要一个时间延迟

更新：更改代码来使用pagerComplete事件，所以没有必要对setTimeout的。