带有过滤器的 Jquery 表分页答案

【问题标题】：Jquery table pagination with filters带有过滤器的 Jquery 表分页
【发布时间】：2021-02-28 12:18:44
【问题描述】：

堆栈溢出！我有带有过滤按钮和简单导航（下一个/上一个）的 html 表格。

我找到了一个简单的过滤器代码。它工作正常：

$('#filter button').on('click', function() {
  $('table tr').hide();
  $('tr.' + $(this).attr('class') + '').show();
  if ($(this).attr('class') == 'showall') $('table tr').show();
})

还有一个用于分页。它也可以正常工作：

    /* Variable Defaults */
var total    = $('tbody > tr').length;
var position = $('tbody').data('position');
var jump     = $('tbody').data('jump');
var paginate = function(position, jump) {
    
    /* Show Default Items */
    $('tbody > tr').each(function() {
        /* Variable Defaults */
        var index = $(this).index();
        
        /* Condition */
        var condition = (index >= position) && (index < position + jump);

        /* Hide/Show Item */
        $(this).toggle(condition);

        /* Set Disabled Status */
        $('.less').prop('disabled', (position - jump) < 0);
        $('.more').prop('disabled', (position + jump) >= total);
    });
};

/* Set Default Text */
$('.count').text(jump);

/* Init Paginate */
paginate(position, jump);

/* Bind Click Events to "Less" and "More" Button */
$('.less, .more').on('click', function() {
    /* Decrease/Increase Position */
    position = $(this).hasClass('less') ? $('tbody').data('position') - jump : $('tbody').data('position') + jump;

    /* Paginate */
    paginate(position, jump);

    /* Update Position */
    $('tbody').data('position', position);
    
});

但如果我使用过滤器代码，它会破坏分页，反之亦然。

我怎样才能让它们一起工作？ Here's JSFIDDLE Demo

【问题讨论】：

标签： javascript html jquery pagination filtering

【解决方案1】：

首先您需要了解$('tbody > tr').each(function() { 是针对每个 tr 的。而不是隐藏的或显示的。

我会保存点击的按钮var active_button = $(this); 然后为每个结果比较结果是否在此触发按钮内:)

【讨论】：