我有一个包含“类别”列的 tablesorter 表。我的搜索揭示了许多不同的方法来过滤各种类型的列,但它们都归结为一个过滤条件。
我所拥有的是页面上的一个部分,其中列出了所有带有复选框的类别,其想法是允许用户选择他们想要查看的类别(有 10 个不同的类别)并将这些选定的类别应用于过滤表格排序器中的行。
我总是可以通过将帖子返回到我的控制器并返回带有一组过滤行的模型来强制执行此操作,但是如果有一种明智的方法可以在客户端完成此操作,我将非常感谢任何人就从哪里开始处理像这样的问题。
我有一个包含“类别”列的 tablesorter 表。我的搜索揭示了许多不同的方法来过滤各种类型的列,但它们都归结为一个过滤条件。
我所拥有的是页面上的一个部分,其中列出了所有带有复选框的类别,其想法是允许用户选择他们想要查看的类别(有 10 个不同的类别)并将这些选定的类别应用于过滤表格排序器中的行。
我总是可以通过将帖子返回到我的控制器并返回带有一组过滤行的模型来强制执行此操作,但是如果有一种明智的方法可以在客户端完成此操作,我将非常感谢任何人就从哪里开始处理像这样的问题。
这是我第一次破解它。所以假设我有一堆代表要过滤的类别的复选框。“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")
}
这是它的样子: