如何在分页中添加上一个和下一个

Question

这是我的分页

分页.js

$(document).ready(function() {
  var totalRows = $('#myTable').find('tbody tr:has(td)').length;
  var recordPerPage = 10;
  var totalPages = Math.ceil(totalRows / recordPerPage);
  var $pages = $('<div id="pages"></div>');
  for (i = 0; i < totalPages; i++) {
    $('<span class="pageNumber">&nbsp;' + (i + 1) + '</span>').appendTo($pages);
  }
  $pages.appendTo('#myTable');

  $('.pageNumber').hover(
    function() {
      $(this).addClass('focus');
    },
    function() {
      $(this).removeClass('focus');
    }
  );

  $('table').find('tbody tr:has(td)').hide();
  var tr = $('table tbody tr:has(td)');
  for (var i = 0; i <= recordPerPage - 1; i++) {
    $(tr[i]).show();
  }
  $('span').click(function(event) {
    $('#myTable').find('tbody tr:has(td)').hide();
    var nBegin = ($(this).text() - 1) * recordPerPage;
    var nEnd = $(this).text() * recordPerPage - 1;
    for (var i = nBegin; i <= nEnd; i++) {
      $(tr[i]).show();
    }
  });
});

表.php

<table id="myTable" class="table table-bordered "    width="100%" cellspacing="0">


</table>

大家好，有谁能帮忙解决这个问题。 我在可能的病人表中进行分页，但我的分页在我上面的图片中。 我希望我的分页从“上一个 1 2 3 下一个”开始，但在我的分页中只有“1 2 3”。 我想添加上一个和下一个。 对不起，伙计们，我只是一个初学者。

Answer 1

在我的示例中，我使用了一个只有 10 个条目的表，并且为方便起见， recordPerPage设置为 2。 如果没有上一页或下一页，则上一页和下一页根本不起作用。 可以将其调整为不显示上一个或下一个，但也许这不是必需的，您已经对此解决方案感到满意。

 $(document).ready(function() { var totalRows = $('#myTable').find('tbody tr:has(td)').length; var recordPerPage = 2; var totalPages = Math.ceil(totalRows / recordPerPage); var $pages = $('<div id="pages"></div>'); for (i = 0; i < totalPages; i++) { $('<span class="pageNumber">&nbsp;' + (i + 1) + '</span>').appendTo($pages); } var next = $('<span class="next" data-target="2">Next</span>'); next.appendTo($pages); var prev = $('<span class="prev" data-target="0">Previous</span>'); prev.prependTo($pages); $pages.appendTo('#myTable'); $('.pageNumber').hover( function() { $(this).addClass('focus'); }, function() { $(this).removeClass('focus'); } ); $('table').find('tbody tr:has(td)').hide(); var tr = $('table tbody tr:has(td)'); for (var i = 0; i <= recordPerPage - 1; i++) { $(tr[i]).show(); } $('span.pageNumber').click(function(event) { $('#myTable').find('tbody tr:has(td)').hide(); var nBegin = ($(this).text() - 1) * recordPerPage; var nEnd = $(this).text() * recordPerPage - 1; for (var i = nBegin; i <= nEnd; i++) { $(tr[i]).show(); } $(".next").data("target", parseInt($(this).text()) + 1); $(".prev").data("target", parseInt($(this).text()) - 1); }); $('span.next').click(function(event) { if ($(this).data("target") <= $(".pageNumber:last").text()) { $('#myTable').find('tbody tr:has(td)').hide(); var nBegin = ($(this).data("target") - 1) * recordPerPage; var nEnd = $(this).data("target") * recordPerPage - 1; for (var i = nBegin; i <= nEnd; i++) { $(tr[i]).show(); } $(this).data("target", $(this).data("target") + 1); $(".prev").data("target", $(".prev").data("target") + 1); } }); $('span.prev').click(function(event) { if ($(this).data("target") >= $(".pageNumber:first").text()) { $('#myTable').find('tbody tr:has(td)').hide(); var nBegin = ($(this).data("target") - 1) * recordPerPage; var nEnd = $(this).data("target") * recordPerPage - 1; for (var i = nBegin; i <= nEnd; i++) { $(tr[i]).show(); } $(this).data("target", $(this).data("target") - 1); $(".next").data("target", $(".next").data("target") - 1); } }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table id="myTable"> <tr> <td>1</td> </tr> <tr> <td>2</td> </tr> <tr> <td>3</td> </tr> <tr> <td>4</td> </tr> <tr> <td>5</td> </tr> <tr> <td>6</td> </tr> <tr> <td>7</td> </tr> <tr> <td>8</td> </tr> <tr> <td>9</td> </tr> <tr> <td>10</td> </tr> </table>

Answer 2

这可能无法直接回答您的问题，但正如您的问题所说，您是 JavaScript 的初学者。 作为初学者，我总是尝试使用现有的插件/库来解决我的问题，然后再尝试自己解决问题。

解决您的问题的最简单方法是使用类似Datatables的东西。 它为自定义提供了强大的支持，并且还附带了您想要的开箱即用的分页。

如果您需要帮助将代码转换为数据表，请提出一个新问题。