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

Question

我正在尝试在 jQuery 的表格中像下面附加的图像那样进行分页。我尝试使用 jsfiddle 中的以下代码来实现这一点。只有 1 2 3 个选项有效。

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

---

注意：jquery 版本：3.4.1 引导版本：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>

Answer 2

您已经完成了几乎所有工作，您所要做的就是创建按钮并检查current_page 的位置，并确保向该导航项触发 click() 方法...

var current_page = 0;
$(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> ');
  }
  
  $('.left-pag').on('click', function() { 
      if(current_page > 0) current_page--;
      $("#nav a").eq(current_page).click();
   });
   
   $('.right-pag').on('click', function() { 
      if(current_page < numPages-1) current_page++;
      $("#nav a").eq(current_page).click();
   });
  
  $('#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');
    current_page = currPage;

    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>
<button class="left-pag">Previous</button>
<button class="right-pag">Next</button>

Answer 3

您可以使用:visible 选择器来获取当前页面上显示的项目。除了[rel] 属性选择器之外，还使用.active 类来获取上一个/下一个分页链接，然后使用trigger("click") 触发其点击处理程序。

$(document).ready(function() {
  $('#data').after('<div id="nav"></div>');
  var rowsShown = 4;
  var rowsTotal = $('#data tbody tr').length;
  var numPages = rowsTotal / rowsShown;
  var currPage = 0;
  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').after('<div id="stats">Displaying ' + $('#data tbody tr:visible').length + ' of ' + rowsTotal + ' items</div>');
  $('#nav a:first').addClass('active');
  $('#nav a').on('click', function() {

    $('#nav a').removeClass('active');
    $(this).addClass('active');
    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);
    $('#stats').text('Displaying ' + $('#data tbody tr:visible').length + ' of ' + rowsTotal + ' items');
  });

  $('<a href="#">&lt;</a> ').prependTo('#nav').on('click', function() {
    $('#nav a[rel].active').prev('a[rel]').trigger('click');
  });

  $('<a href="#">&gt;</a>').appendTo('#nav').on('click', function() {
    $('#nav a[rel].active').next('a[rel]').trigger('click');
  });
});

.active {
  font-weight: bold;
}

#nav a {
  display: inline-block;
  float: left;
  padding: 5px;
}

#nav {
  overflow: auto;
}

<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 4

您必须编辑您的 js 代码，在 $('#nav a').bind(.... 之外全局定义 currpage，以便在循环之前附加上一个链接，并在循环之后添加下一个链接

$(document).ready(function() {
  var currPage = 0;

  $('#data').after('<div id="nav"></div>');
  var rowsShown = 4;
  var rowsTotal = $('#data tbody tr').length;
  var numPages = rowsTotal / rowsShown;

  $('#nav').append('<a href="#" id="prev" rel="' + (((currPage - 1) >= 0) ? (currPage - 1) : 0) + '" ><</a> ');
  for (i = 0; i < numPages; i++) {
    var pageNum = i + 1;
    $('#nav').append('<a href="#" rel="' + i + '">' + pageNum + '</a> ');
  }
  $('#nav').append('<a href="#" id="next" rel="' + (((currPage + 1) < numPages) ? (currPage + 1) : numPages - 1) + '" >></a> ');

  $('<span>showing ' + rowsShown + ' of ' + rowsTotal + '</span>').insertAfter('#nav')
  $('#data tbody tr').hide();
  $('#data tbody tr').slice(0, rowsShown).show();
  $('#nav a:first').addClass('active');
  $('#nav a').on('click', function() {

    $('#nav a').removeClass('active');
    $(this).addClass('active');
    currPage = parseInt($(this).attr('rel'));
    $(document).find('#prev').attr('rel', (((currPage - 1) >= 0) ? (currPage - 1) : 0));

    $(document).find('#next').attr('rel', (((currPage + 1) < numPages) ? (currPage + 1) : numPages));
    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>