前端ajax分页实例,jQuery实现分页功能（含Ajax请求、后台数据、附完整demo）_橘里_前端开发者...

好的，我了解您的问题。以下是一个前端ajax分页实例，使用jQuery实现分页功能：

HTML部分：

<div id="table-container">
  <table>
    <thead>
      <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody id="table-body">
    </tbody>
  </table>
</div>
<div id="pagination"></div>

JS部分：

$(document).ready(function() {
  var currentPage = 1;
  var pageSize = 10;
  var totalPage = 0;
  
  function loadTableData(page) {
    $.ajax({
      url: "your-backend-api-url",
      data: {
        page: page,
        pageSize: pageSize
      },
      success: function(response) {
        var tableBodyHtml = "";
        $.each(response.data, function(index, item) {
          tableBodyHtml += "<tr>";
          tableBodyHtml += "<td>" + item.id + "</td>";
          tableBodyHtml += "<td>" + item.name + "</td>";
          tableBodyHtml += "<td>" + item.email + "</td>";
          tableBodyHtml += "</tr>";
        });
        $("#table-body").html(tableBodyHtml);
        
        currentPage = response.currentPage;
        pageSize = response.pageSize;
        totalPage = response.totalPage;
        
        renderPagination();
      }
    });
  }
  
  function renderPagination() {
    var paginationHtml = "";
    if (currentPage > 1) {
      paginationHtml += '<a href="#" class="prev-page">Prev</a>';
    } else {
      paginationHtml += '<span class="disabled">Prev</span>';
    }
    for (var i = 1; i <= totalPage; i++) {
      if (i === currentPage) {
        paginationHtml += '<span class="current-page">' + i + '</span>';
      } else {
        paginationHtml += '<a href="#" class="page">' + i + '</a>';
      }
    }
    if (currentPage < totalPage) {
      paginationHtml += '<a href="#" class="next-page">Next</a>';
    } else {
      paginationHtml += '<span class="disabled">Next</span>';
    }
    $("#pagination").html(paginationHtml);
  }
  
  loadTableData(currentPage);
  
  $("#pagination").on("click", ".prev-page", function() {
    loadTableData(currentPage - 1);
  });
  
  $("#pagination").on("click", ".next-page", function() {
    loadTableData(currentPage + 1);
  });
  
  $("#pagination").on("click", ".page", function() {
    var page = $(this).text();
    loadTableData(page);
  });
});

这个示例中，我们使用了一个loadTableData函数来通过Ajax请求获取数据。我们还使用了一个renderPagination函数来呈现分页器。在分页器中，我们使用了三种不同的HTML元素来表示当前页面、可用页面和不可用页面。我们还为分页器中的每个页面添加了一个click事件，这个事件会触发loadTableData函数并传递相应的页面号码。

请注意，这只是一个示例，您需要将“your-backend-api-url”替换为您自己的后端API URL，以便从服务器获取数据。

希望这可以帮助到您！