Question

我发现这个很好的jquery plugin可以在客户端上过滤表格结果。

它绝对正常，但我想在没有匹配时返回警报。可以找到jquery here。

正如您所看到的，有一些评论：

     } // if the functionality should be added
    }); // return this.each
}; // $.fn.filterTable

但我需要一点帮助..

更新

if(!tbody.find('td').hasClass(settings.highlightClass)) 
  $('#planner-data').html("<div class='alert alert-info alert-dismissible geen-resultaten-filter' role='alert'><button type='button' class='close' data-dismiss='alert' aria-label='Close'><span aria-hidden='true'>&times;</span></button>Geen opdrachten gevonden!</div>");

Answer 1

以下是完成过滤的功能，我在您想要循环查看结果的部分中进行了评论，以确定是否没有匹配并显示您的警报。

var doFiltering = function(table, q) { // handle the actual table filtering
            var tbody=table.find('tbody'); // cache the tbody element
            if (q==='') { // if the filtering query is blank
                tbody.find('tr').show().addClass(settings.visibleClass); // show all rows
                tbody.find('td').removeClass(settings.highlightClass); // remove the row highlight from all cells
                if (settings.hideTFootOnFilter) { // show footer if the setting was specified
                    table.find('tfoot').show();
                }

            } else { // if the filter query is not blank
                tbody.find('tr').hide().removeClass(settings.visibleClass); // hide all rows, assuming none were found
                if (settings.hideTFootOnFilter) { // hide footer if the setting was specified
                    table.find('tfoot').hide();
                }
                tbody.find('td').removeClass(settings.highlightClass).filter(':filterTableFind("'+q.replace(/(['"])/g,'\\$1')+'")').addClass(settings.highlightClass).closest('tr').show().addClass(settings.visibleClass); // highlight (class=alt) only the cells that match the query and show their rows

                // ****************************************************
                // Check to see if any items in the table are visible
                // if NO ITEMS are visible THEN show your alert
                // ****************************************************

            }

            if (settings.callback) { // call the callback function
                settings.callback(q, table);
            }
        }; // doFiltering()

修改

这应该可以解决问题 -

if(!tbody.find('td').hasClass('alt')) alert('no results!');

在我看来

警报不是让用户知道没有结果的理想方式。一直弹出警报不是用户友好的。相反，我建议实施类似的东西：

if(!tbody.find('td').hasClass(settings.highlightClass)) { $('body').find('#empty').text('No results').show(); } else { $('body').find('#empty').hide(); }

您在表格下方添加了一个ID为empty的元素，当过滤器没有结果时，该元素可以显示消息：

</table> <p id="empty"></p> </body>

jQuery.FilterTable：未找到结果时返回警报

1 个答案: