javascript - 在 javascript 和 jquery 中使用 <- 和 -> 键进行分页

Question

我正尝试在 jQuery 的表格中进行分页，如下图所示。我试图在 jsfiddle 中使用以下代码来实现这一点。只有 1 2 3 选项有效。

1. 如何为导航添加前进和后退箭头键
2. 我还需要知道如何在图像中添加“显示 25 个条目中的第 10 个条目”。 任何人都可以告诉如何做到这一点。 提前致谢。

---

注:Jquery版本:3.4.1 Bootstrap 版本:4.3.1

$(document).ready(function() {
  $('#data').after('<div id="nav"></div>');
  var rowsShown = 4;
  var rowsTotal = $('#data tbody tr').length;
  var numPages = rowsTotal / rowsShown;
  for (i = 0; i < numPages; i++) {
    var pageNum = i + 1;
    $('#nav').append('<a href="#" rel="' + i + '">' + pageNum + '</a> ');
  }
  $('#data tbody tr').hide();
  $('#data tbody tr').slice(0, rowsShown).show();
  $('#nav a:first').addClass('active');
  $('#nav a').bind('click', function() {

    $('#nav a').removeClass('active');
    $(this).addClass('active');
    var currPage = $(this).attr('rel');

    var startItem = currPage * rowsShown;
    var endItem = startItem + rowsShown;
    $('#data tbody tr').css('opacity', '0.0').hide().slice(startItem, endItem).
    css('display', 'table-row').animate({
      opacity: 1
    }, 300);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="data">
  <tr><td>Row 1</td></tr>
  <tr><td>Row 2</td></tr>
  <tr><td>Row 3 </td></tr>
  <tr><td>Row 4</td></tr>
  <tr><td>Row 5</td></tr>
  <tr><td>Row 6</td></tr>
  <tr><td>Row 7</td></tr>
  <tr><td>Row 8</td></tr>
  <tr><td>Row 9</td></tr>
  <tr><td>Row 10</td></tr>
  <tr><td>Row 11</td></tr>
  <tr><td>Row 12</td></tr>
  <tr><td>Row 13</td></tr>
  <tr><td>Row 14</td></tr>
  <tr><td>Row 15</td></tr>
  <tr><td>Row 16</td></tr>
  <tr><td>Row 17</td></tr>
  <tr><td>Row 18</td></tr>
  <tr><td>Row 19</td></tr>
  <tr><td>Row 20</td></tr>
  <tr><td>Row 21</td></tr>
  <tr><td>Row 22</td></tr>
  <tr><td>Row 23</td></tr>
  <tr><td>Row 24</td></tr>
  <tr><td>Row 25</td></tr>
</table>

Answer 1

我移动了箭头并给了他们一个类。

然后我询问事件的导航链接

我还将已弃用的 .bind 更改为 .on

也添加了“显示 x of y”

$(document).ready(function() {
  var rowsShown = 4;
  var rowsTotal = $('#data tbody tr').length;
  var numPages = rowsTotal / rowsShown;

  for (i = 0; i < numPages; i++) {
    var pageNum = i + 1;
    $('#nav').append('<a href="#" rel="' + i + '">' + pageNum + '</a> ');
  }


  $('#nav a').on('click', function() {
    $('#nav a').removeClass('active');
    $(this).addClass('active'); // add not(".arrow"). if inside nav

    var currPage = $(this).attr('rel');
    var startItem = currPage * rowsShown;
    var endItem = startItem + rowsShown;
    $('#data tbody tr').css('opacity', '0.0').hide().slice(startItem, endItem)
      .css('display', 'table-row').animate({
        opacity: 1
      }, 300);
    $("#rowof").html(`Showing ${startItem+1} to ${endItem>=rowsTotal?rowsTotal:endItem} of ${rowsTotal}`);
  });

  
  $("#navContainer .arrow").on("click", function() {
    var currentPage = +$('#nav a.active').attr("rel");
    var prev = this.id === "prev";
    if (currentPage === 0 && prev); // nothing
    else if (currentPage === +$('#nav a:last').attr("rel") && !prev); // nothing
    else {
      currentPage += prev ? -1 : 1;
      $("#nav a").eq(currentPage).click();
    }
  })

  $('#data tbody tr').hide();
  $("#nav a").eq(0).click();
  
});

a {
  text-decoration: none;
  padding: 2px
}

.active {
  text-decoration: underline
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="data">
  <tbody>
  <tr><td>Row 1</td></tr>
  <tr><td>Row 2</td></tr>
  <tr><td>Row 3 </td></tr>
  <tr><td>Row 4</td></tr>
  <tr><td>Row 5</td></tr>
  <tr><td>Row 6</td></tr>
  <tr><td>Row 7</td></tr>
  <tr><td>Row 8</td></tr>
  <tr><td>Row 9</td></tr>
  <tr><td>Row 10</td></tr>
  <tr><td>Row 11</td></tr>
  <tr><td>Row 12</td></tr>
  <tr><td>Row 13</td></tr>
  <tr><td>Row 14</td></tr>
  <tr><td>Row 15</td></tr>
  <tr><td>Row 16</td></tr>
  <tr><td>Row 17</td></tr>
  <tr><td>Row 18</td></tr>
  <tr><td>Row 19</td></tr>
  <tr><td>Row 20</td></tr>
  <tr><td>Row 21</td></tr>
  <tr><td>Row 22</td></tr>
  <tr><td>Row 23</td></tr>
  <tr><td>Row 24</td></tr>
  <tr><td>Row 25</td></tr>
  </tbody>  
</table>
<div id="navContainer">
  <a href="#" class="arrow" id="prev">⬅️</a>
  <span id="nav"></span>
  <a href="#" class="arrow" id="next">➡️</a> <span id="rowof"></span>
</div>