TableSorter多重过滤器

时间:2013-07-26 21:19:06

标签: tablesorter

我有一个包含'Category'列的tablesorter表。我的搜索显示了许多不同的方法来过滤各种类型的列,但它们都归结为单个过滤条件。

我所拥有的是页面上的一个部分,其中列出了带复选框的所有类别,其目的是允许用户选择他们想要查看的类别(有10个不同的类别)并应用这些选定的类别过滤tablesorter中的行。

我总是可以通过回复到我的控制器来强制执行此操作并返回带有过滤行集的模型,但是如果有一种明智的方法可以在客户端完成此操作,我将非常感谢任何人输入到哪里开始解决这样的问题。

1 个答案:

答案 0 :(得分:1)

这是我的第一次破解。所以假设我有一堆复选框来表示要过滤的类别。类'tablesorter'就是我所说的包含数据的表。我在单元格中添加了一个id属性,其中包含了类别。我是这样做的,因为我不希望id在屏幕上可见。最后,我在隐藏/取消隐藏行后刷新斑马条纹。如果有更好的方法可以做到这一点,我全都耳朵(我是javascript / jquery / tablesorter的新手)。

function FilterCompanies() {
        $(':checkbox:not(:checked)').each(function () {
            var unselectedCategoryId = $(this).attr('id').substring(3);
            $('.tablesorter > tbody > tr > td[id]').each(function() {
                if ($(this).attr('id') == unselectedCategoryId) {
                    $($(this).parent()).addClass('hidden');
                } 
            });
        });
        $(':checkbox:checked').each(function () {
            var unselectedCategoryId = $(this).attr('id').substring(3);
            $('.tablesorter > tbody > tr > td[id]').each(function () {
                if ($(this).attr('id') == unselectedCategoryId) {
                    $($(this).parent()).removeClass('hidden');
                }
            });
        });
        $(".tablesorter").trigger("applyWidgets")
    }

这是它的样子:

enter image description here