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.