TableFilter插件空数据 [英] TableFilter Plugin with Null Data

问题描述

我使用jquery.tablesorter.widgets.js为表过滤器工作正常，但我必须显示未找到资料时，根据搜索条件无法记录。

I am using "jquery.tablesorter.widgets.js" for Table filter working fine, but I have to display " No Data Found" when records not available based on Search Criteria.

下面是我的code。

HTML code：

HTML Code:

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

Javascript Code:

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

我要显示无数据找到的消息在表行。

I have to display "No Data Found" message as row in table .

推荐答案

您可以使用内置的 showError 函数（2.15版+），并结合几个事件如下（的演示）：

You can use the built-in showError function (v2.15+) and bind to a few events as follows (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 计数不是筛选器END 事件发生后立即更新。

Note, the event binding needs to occur before the pager is initialized & the short setTimeout is also required because the pager filteredRows count is not updated immediately after the filterEnd event.

我需要修复的 pagerChange 事件以确保它激发每个寻呼机变化之后，而不仅仅是一个页的变化，所以你那么只需要绑定到一个事件，这并不需要一个延时线

更新：改变code使用 pagerComplete 事件，所以不需要一个setTimeout的。

Update: Changed code to use the pagerComplete event, so no need for a setTimeout.

这篇关于TableFilter插件空数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！