廊坊阿里云代理商：ajax分页代码

luotuoemo • 2024年1月3日 13:50 • 阿里云 • 阅读 280

以下是一个基于Ajax的分页代码示例：

HTML部分：

<div id="resultContainer"></div>
<div id="pagination"></div>

JavaScript部分：

$(document).ready(function() {
  var currentPage = 1;
  var totalPages;

  function loadPage(page) {
    $.ajax({
      url: '/get_data.php',
      type: 'POST',
      data: { page: page },
      dataType: 'json',
      success: function(response) {
        // 渲染数据
        var html = '';
        for (var i = 0; i < response.data.length; i++) {
          html += '<div>' + response.data[i].title + '</div>';
        }
        $('#resultContainer').html(html);
        
        // 更新分页
        currentPage = page;
        totalPages = response.totalPages;
        renderPagination();
      },
      error: function() {
        alert('请求数据失败！');
      }
    });
  }

  function renderPagination() {
    var html = '';

    // 当前页不是第一页时显示上一页按钮
    if (currentPage > 1) {
      html += '<button onclick="loadPage(' + (currentPage - 1) + ')">上一页</button>';
    }

    // 当前页不是第一页且不是最后一页时显示当前页前一页
    if (currentPage > 2) {
      html += '<button onclick="loadPage(' + (currentPage - 1) + ')">' + (currentPage - 1) + '</button>';
    }

    // 显示当前页
    html += '<button class="active">' + currentPage + '</button>';

    // 当前页不是最后一页且不是倒数第二页时显示当前页后一页
    if (currentPage < totalPages - 1) {
      html += '<button onclick="loadPage(' + (currentPage + 1) + ')">' + (currentPage + 1) + '</button>';
    }

    // 当前页不是最后一页时显示下一页按钮
    if (currentPage < totalPages) {
      html += '<button onclick="loadPage(' + (currentPage + 1) + ')">下一页</button>';
    }

    $('#pagination').html(html);
  }

  // 初始化加载第一页数据
  loadPage(1);
});

上述代码使用jQuery库实现了一个简单的分页功能，通过Ajax请求后端接口获取分页数据，并动态渲染在页面上。分页部分根据当前页和总页数生成相应的HTML代码，点击按钮可切换到对应页码的数据。请根据实际情况修改接口URL和数据渲染部分的逻辑。

以下是一个基于ajax实现分页的例子：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>AJAX分页</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script>
    $(document).ready(function() {
      var currentPage = 1; // 当前页码

      // 加载数据函数
      function loadData(page) {
        $.ajax({
          url: 'your_api_url',
          type: 'GET',
          data: { page: page },
          dataType: 'json',
          success: function(response) {
            // 清空数据列表
            $('#dataList').empty();

            // 显示数据
            for (var i = 0; i < response.data.length; i++) {
              var item = response.data[i];
              var row = '<tr><td>' + item.id + '</td><td>' + item.name + '</td></tr>';
              $('#dataList').append(row);
            }

            // 更新分页信息
            $('#currentPage').text(response.page);
            $('#totalPage').text(response.totalPage);

            // 更新当前页码
            currentPage = response.page;
          },
          error: function() {
            alert('加载数据失败');
          }
        });
      }

      // 首次加载数据
      loadData(currentPage);

      // 点击上一页按钮
      $('#prevBtn').click(function() {
        if (currentPage > 1) {
          currentPage--;
          loadData(currentPage);
        }
      });

      // 点击下一页按钮
      $('#nextBtn').click(function() {
        var totalPage = parseInt($('#totalPage').text());
        if (currentPage < totalPage) {
          currentPage++;
          loadData(currentPage);
        }
      });
    });
  </script>
</head>
<body>
  <table id="dataList">
    <!-- 数据列表将动态添加到这里 -->
  </table>

  <!-- 分页按钮 -->
  <button id="prevBtn">上一页</button>
  <span id="currentPage">1</span> / <span id="totalPage">1</span>
  <button id="nextBtn">下一页</button>
</body>
</html>

注意替换代码中的your_api_url为你自己的API地址，该API需要返回JSON格式的数据，包括data（当前页的数据列表）、page（当前页码）和totalPage（总页数）字段。

以上代码实现了一个简单的分页功能，点击上一页/下一页按钮时会通过ajax请求加载对应页码的数据，并更新数据列表和分页信息显示。

发布者：luotuoemo，转转请注明出处：https://www.jintuiyun.com/118996.html