TableFilter Plugin with Null Data

Question

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.

Here is My 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:

              $(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 .

Answer 1

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

});

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.

I need to fix the pagerChange event to ensure it fires after every pager change, not just a "page" change, so you would then only need to bind to one event that does not need a time delay

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