如何在分頁中添加上一個和下一個

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的東西。 它為自定義提供了強大的支持，並且還附帶了您想要的開箱即用的分頁。

如果您需要幫助將代碼轉換為數據表，請提出一個新問題。