javascript - JQuery 分页不适用于过滤

Question

我写信是为了寻求帮助，因为我在大学类(class)作业中遇到了一些麻烦。

基本上我已经创建了 JQuery 分页和 JQuery 过滤。单独来看，它们工作得非常好，但是如果我开始过滤，假设我的分页限制我一次只能显示 5 个结果，那么当我开始输入时，我会返回到全部结果(例如 12 个)。

我还必须为此编写一个排序功能，我担心我会遇到同样的问题。我认为我需要将它们更好地整合在一起。

这里我提供了我的 JS fiddle 的链接:http://jsfiddle.net/u7unm9zy/1/(检查过滤的最佳方法是在搜索框中输入 1)

HTML

<form action="" class="live-search" method="post">
    <input type="text" value="" name="filter" id="filter" placeholder="Search" />
</form>
<table>
    <thead>
        <th>Column 1</th>
        <th>Column 2</th>
        <th>Column 3</th>
        <th>Column 4</th>
        <th>Column 5</th>
    </thead>
    <tbody>
        <tr>
            <td>Row 1</td>
            <td>Row 1</td>
            <td>Row 1</td>
            <td>Row 1</td>
            <td>Row 1</td>
        </tr>
        <tr>
            <td>Row 2</td>
            <td>Row 2</td>
            <td>Row 2</td>
            <td>Row 2</td>
            <td>Row 2</td>
        </tr>
        <tr>
            <td>Row 3</td>
            <td>Row 3</td>
            <td>Row 3</td>
            <td>Row 3</td>
            <td>Row 3</td>
        </tr>
        <tr>
            <td>Row 4</td>
            <td>Row 4</td>
            <td>Row 4</td>
            <td>Row 4</td>
            <td>Row 4</td>
        </tr>
        <tr>
            <td>Row 5</td>
            <td>Row 5</td>
            <td>Row 5</td>
            <td>Row 5</td>
            <td>Row 5</td>
        </tr>
        <tr>
            <td>Row 6</td>
            <td>Row 6</td>
            <td>Row 6</td>
            <td>Row 6</td>
            <td>Row 6</td>
        </tr>
        <tr>
            <td>Row 7</td>
            <td>Row 7</td>
            <td>Row 7</td>
            <td>Row 7</td>
            <td>Row 7</td>
        </tr>
        <tr>
            <td>Row 8</td>
            <td>Row 8</td>
            <td>Row 8</td>
            <td>Row 8</td>
            <td>Row 8</td>
        </tr>
        <tr>
            <td>Row 9</td>
            <td>Row 9</td>
            <td>Row 9</td>
            <td>Row 9</td>
            <td>Row 9</td>
        </tr>
        <tr>
            <td>Row 10</td>
            <td>Row 10</td>
            <td>Row 10</td>
            <td>Row 10</td>
            <td>Row 10</td>
        </tr>
        <tr>
            <td>Row 11</td>
            <td>Row 11</td>
            <td>Row 11</td>
            <td>Row 11</td>
            <td>Row 11</td>
        </tr>
        <tr>
            <td>Row 12</td>
            <td>Row 12</td>
            <td>Row 12</td>
            <td>Row 12</td>
            <td>Row 12</td>
        </tr>
    </tbody>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

JQuery

$('table').each(function () {
  var currentPage = 0;
  var numPerPage = 5;
  var $table = $(this);

  $table.bind('repaginate', function () {
    $table.find('tbody tr').hide().slice(currentPage * numPerPage, (currentPage + 1) * numPerPage).show();
  });
  $table.trigger('repaginate');

  var numRows = $table.find('tbody tr').length;
  var numPages = Math.ceil(numRows / numPerPage);
  var $pager = $('<div class="pager"></div>');
  $('<span class="first">&lt;</span>').bind('click', function (event) {
    currentPage = 0;
    $table.trigger('repaginate');
    $('span.page-number').each(function () {
      if (parseInt($(this).text()) == 1) {
        $(this).addClass('active')
      } else {
        $(this).removeClass('active');
      }
    });
    if (currentPage == 0) {
      $(this).addClass('disabled');
      $(this).parents('.pager').children('.prev').addClass('disabled');
    } else {
      $(this).removeClass('disabled');
      $(this).parents('.pager').children('.prev').remove('disabled');
    }
    if (currentPage == numPages - 1) {
      $(this).parents('.pager').children('span.next').addClass('disabled');
      $(this).parents('.pager').children('span.last').addClass('disabled');
    } else {
      $(this).parents('.pager').children('span.next').removeClass('disabled');
      $(this).parents('.pager').children('span.last').removeClass('disabled');
    }
  }).appendTo($pager);
  $('<span class="prev">&lt;&lt;</span>').bind('click', function (event) {
    if ((currentPage - 1) >= 0) {
      currentPage = currentPage - 1;
      $table.trigger('repaginate');
      $('span.page-number').each(function () {
        if (parseInt($(this).text()) - 1 == currentPage) {
          $(this).addClass('active')
        } else {
          $(this).removeClass('active');
        }
      });
    }
    if (currentPage == 0) {
      $(this).addClass('disabled');
      $(this).parents('.pager').children('.first').addClass('disabled');
    } else {
      $(this).removeClass('disabled');
      $(this).parents('.pager').children('.first').removeClass('disabled');
    }
    if (currentPage == numPages - 1) {
      $(this).parents('.pager').children('span.next').addClass('disabled');
      $(this).parents('.pager').children('span.last').addClass('disabled');
    } else {
      $(this).parents('.pager').children('span.next').removeClass('disabled');
      $(this).parents('.pager').children('span.last').removeClass('disabled');
    }
  }).appendTo($pager);
  for (var page = 0; page < numPages; page++) {
    $('<span class="page-number"></span>').text(page + 1).bind('click', {
      newPage: page
    }, function (event) {
      currentPage = event.data['newPage'];
      $table.trigger('repaginate');
      $(this).addClass('active').siblings().removeClass('active');

      if (event.data['newPage'] == 0) {
        $(this).parents('.pager').children('span.prev').addClass('disabled');
        $(this).parents('.pager').children('span.first').addClass('disabled');
      } else {
        $(this).parents('.pager').children('span.prev').removeClass('disabled');
        $(this).parents('.pager').children('span.first').removeClass('disabled');
      }
      if (event.data['newPage'] == numPages - 1) {
        $(this).parents('.pager').children('span.next').addClass('disabled');
        $(this).parents('.pager').children('span.last').addClass('disabled');
      } else {
        $(this).parents('.pager').children('span.next').removeClass('disabled');
        $(this).parents('.pager').children('span.last').removeClass('disabled');
      }
    }).appendTo($pager).addClass('clickable');
  }
  $pager.insertAfter($table).find('span.page-number:first').addClass('active');
  $('<span class="next">&gt;</span>').bind('click', function (event) {
    if ((currentPage + 1) <= numPages) {
      currentPage = currentPage + 1;
      $table.trigger('repaginate');
      $('span.page-number').each(function () {
        if (parseInt($(this).text()) - 1 == currentPage) {
          $(this).addClass('active')
        } else {
          $(this).removeClass('active');
        }
      });
    }
    if (currentPage == numPages - 1) {
      $(this).addClass('disabled');
      $(this).parents('.pager').children('span.last').addClass('disabled');
    } else {
      $(this).removeClass('disabled');
      $(this).parents('.pager').children('span.last').removeClass('disabled');
    }
    if (currentPage == 0) {
      $(this).parents('.pager').children('.prev').addClass('disabled');
      $(this).parents('.pager').children('.first').addClass('disabled');
    } else {
      $(this).parents('.pager').children('.prev').removeClass('disabled');
      $(this).parents('.pager').children('.first').removeClass('disabled');
    }
  }).appendTo($pager);
  $('<span class="last">&gt;&gt;</span>').bind('click', function (event) {
    currentPage = numPages - 1;
    $table.trigger('repaginate');
    $('span.page-number').each(function () {
      if (parseInt($(this).text()) == numPages) {
        $(this).addClass('active')
      } else {
        $(this).removeClass('active');
      }
    });
    if (currentPage == numPages - 1) {
      $(this).addClass('disabled');
      $(this).parents('.pager').children('span.next').addClass('disabled');
    } else {
      $(this).removeClass('disabled');
      $(this).parents('.pager').children('span.next').remove('disabled');
    }
    if (currentPage == 0) {
      $(this).parents('.pager').children('.prev').addClass('disabled');
      $(this).parents('.pager').children('.first').addClass('disabled');
    } else {
      $(this).parents('.pager').children('.prev').removeClass('disabled');
      $(this).parents('.pager').children('.first').removeClass('disabled');
    }
  }).appendTo($pager);
  if (currentPage == 0) {
    $pager.find('.first').addClass('disabled');
    $pager.find('.prev').addClass('disabled');
  }


  /** Filter Data - Live Search **/
  function filter(selector, query) {
    query = $.trim(query);
    query = query.replace(/ /gi, '|');

    $(selector).each(function () {
      if (($(this).text().search(new RegExp(query, "i")) < 0)) {
        $(this).hide().removeClass('visible');

      } else {
        $(this).show().addClass('visible');
      }
    });
  }

  $('#filter').keyup(function (event) {
    if (event.keyCode == 27 || $(this).val() == '') {
      $(this).val('');
      $('table tbody tr').removeClass('visible').show().addClass('visible');
    } else {
      filter('table tbody tr', $(this).val());
    }
  });

});

CSS

table, td, th {
    border: 1px solid black;
}
.pager {
    margin-top: 15px;
}
.pager span.page-number,
.pager span.first,
.pager span.prev,
.pager span.last,
.pager span.next {
    padding-right: 5px;
    cursor: pointer;
}
.pager span.page-number:hover,
.pager span.first:hover,
.pager span.prev:hover,
.pager span.last:hover,
.pager span.next:hover {
     color: green;   
}
.pager span.page-number.active {
     color: red;   
}

正如您将看到的，您可以简单地使用分页和过滤，但是当您过滤分页符时，我怎样才能让分页工作但一次只显示 5 个结果，然后其余结果的顺序是按过滤器的顺序？

谢谢，抱歉，可能需要一段时间才能阅读完，但我感谢任何人阅读它。

Answer 1

您可能想看看数据表的 JQuery 插件。

链接:http://holt59.github.io/datatable/