用jQuery中的ajax分页实现代码

下面是关于使用 jQuery 中的 ajax 分页实现的完整攻略。

主要思路

jQuery 中的 ajax 分页实现其实是通过 ajax 请求获取分页数据，然后将获取到的数据动态插入到页面当中，从而达到了分页的效果。

在实现过程中，我们首先要进行的是对分页数据进行获取。获取到数据以后，我们需要进行一些处理，比如拼接数据、渲染数据等，并将其实现在前端页面上。

具体步骤

接下来具体讲解一下实现 ajax 分页的具体步骤。

1. 准备 HTML 结构

首先，我们需要准备一些基本的 HTML 结构，这些结构将用于存放分页数据。

<div class="content-wrap">
  <ul class="list-wrap"></ul>
  <div class="pagination-wrap"></div>
</div>

上面的 HTML 结构主要分为两部分：list-wrap 用于存放分页数据，pagination-wrap 用于存放分页组件。这样的 HTML 结构是比较常用的分页模板。

2. 准备样式

为了让页面展现出好看的分页效果，在准备了 HTML 结构之后，我们还需要对分页的样式进行一些修改。这里不再赘述。

3. 准备数据

在准备好 HTML 和 CSS 之后，我们接下来要做的就是准备分页所需要的数据。一般来说，我们需要从后台进行数据的获取，因此需要使用 ajax 进行数据的请求。

// 获取数据的地址
const URL = "http://xxx.com/data";

// 获取数据的方法
function getData(pageNum) {
  $.ajax({
    url: URL,
    type: "get",
    data: {
      pageNum: pageNum // 当前页数
    },
    dataType: "json",
    success: function(res) {
      // 在这里对分页数据进行处理，比如拼接数据、渲染数据等
    }
  })
}

上面的代码中，我们定义了一个 getData 函数来获取数据。我们可以看到，在函数中使用了 jQuery 中的 ajax 方法来进行数据的请求，其中的参数包括请求的地址、请求的类型、请求所需的参数（当前页数等）、请求成功后的回调函数等。

注意，在成功回调函数里需要对分页数据进行处理，即拼接数据、渲染数据等操作。

4. 渲染数据

在拿到后台数据之后，我们需要进行数据的渲染，将其实现在前端页面上。这里我们使用 jQuery 的 append 方法来进行数据的渲染。

// 在成功回调函数里进行数据的处理和渲染
success: function(res) {
  let html = '';

  for (let i = 0; i < res.data.length; i++) {
    html += '<li>' + res.data[i].title + '</li>';
  }

  $('.list-wrap').empty().append(html);
}

上面代码中，我们使用 for 循环来遍历拿到的数据，并将其进行拼接。在拼接完毕后，将数据渲染到页面中。

5. 渲染分页组件

在数据渲染完成之后，我们需要对分页组件进行渲染。这里我们依旧使用 jQuery 的 append 方法进行渲染。

success: function(res) {
  let html = '';

  for (let i = 0; i < res.data.length; i++) {
    html += '<li>' + res.data[i].title + '</li>';
  }

  $('.list-wrap').empty().append(html);

  let pageHtml = '<a href="javascript:void(0);" class="prev-page">上一页</a>';

  for (let i = 1; i <= res.totalPage; i++) {
    if (i === res.pageNum) {
      pageHtml += '<span class="active">' + i + '</span>';
    } else {
      pageHtml += '<a href="javascript:void(0);" class="page">' + i + '</a>'
    }
  }

  pageHtml += '<a href="javascript:void(0);" class="next-page">下一页</a>';

  $('.pagination-wrap').empty().append(pageHtml);
}

上面代码中，我们依旧是在成功回调函数里进行分页组件的渲染，具体思路是：

先构造出“上一页”的 html 结构
遍历分页数据的总页数，如果当前循环到的页数是当前页数，则为该页数添加“active”样式，否则不加样式
最后构造出“下一页”的 html 结构

6. 绑定事件

最后，我们需要为分页组件的前一页、后一页和页码添加事件绑定，进而能够实现分页的效果。

// 绑定分页组件点击事件
$('.pagination-wrap').delegate('.page', 'click', function() {
  const pageNum = $(this).text();
  getData(pageNum);  // 重新加载数据
});

$('.pagination-wrap').delegate('.prev-page', 'click', function() {
  const pageNum = parseInt($('.active').text()) - 1;
  getData(pageNum);  // 重新加载数据
});

$('.pagination-wrap').delegate('.next-page', 'click', function() {
  const pageNum = parseInt($('.active').text()) + 1;
  getData(pageNum);  // 重新加载数据
});

上面代码中，我们使用了 jQuery 中的 delegate 方法来进行事件的绑定。具体思路是：

当页面点击“前一页”时，获取当前激活页数，然后将其减1传入到请求方法中，相当于重新加载前一页页码的数据
当页面点击“后一页”时，获取当前激活页数，然后将其加1传入到请求方法中，相当于重新加载后一页页码的数据
当页面点击页码，直接获取该页码的文本内容并传入到请求方法中，重新加载该页码对应的页面数据

到此为止，我们就完成了 jQuery 中的 ajax 分页实现。

示例说明

下面我们以两个小示例说明以上的步骤。示例中，我们使用的是测试服务器提供的模拟数据，实际应用中需要换成自己的数据接口。

示例一：最简单的分页示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>ajax分页示例</title>
  <style>
    .content-wrap {
      width: 600px;
      margin: 50px auto;
    }

    .list-wrap {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .list-wrap li {
      padding: 10px;
      margin-bottom: 10px;
      border: 1px solid #ccc;
      font-size: 16px;
      font-weight: bold;
    }

    .pagination-wrap {
      display: flex;
      justify-content: center;
      margin-top: 20px;
    }

    .pagination-wrap a, .pagination-wrap span {
      display: inline-block;
      padding: 0 10px;
      height: 34px;
      line-height: 34px;
      border: 1px solid #ccc;
      text-align: center;
      cursor: pointer;
    }

    .pagination-wrap .active {
      background: #f00;
      color: #fff;
      border-color: #f00;
    }
  </style>
</head>
<body>
  <div class="content-wrap">
    <ul class="list-wrap"></ul>
    <div class="pagination-wrap"></div>
  </div>

  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script>
    // 获取数据的地址
    const URL = "http://httpbin.org/get";

    // 获取数据的方法
    function getData(pageNum) {
      $.ajax({
        url: URL,
        type: "get",
        data: {
          pageNum: pageNum // 当前页数
        },
        dataType: "json",
        success: function(res) {
          let html = '';

          for (let i = 0; i < 5; i++) {
            html += '<li>这是第 '+ (pageNum*5 + i+1) +' 条数据</li>';
          }

          $('.list-wrap').empty().append(html);

          let pageHtml = '<a href="javascript:void(0);" class="prev-page">上一页</a>';

          for (let i = 1; i <= 10; i++) {
            if (i === pageNum) {
              pageHtml += '<span class="active">' + i + '</span>';
            } else {
              pageHtml += '<a href="javascript:void(0);" class="page">' + i + '</a>'
            }
          }

          pageHtml += '<a href="javascript:void(0);" class="next-page">下一页</a>';

          $('.pagination-wrap').empty().append(pageHtml);
        }
      })
    }

    getData(1);

    // 绑定分页组件点击事件
    $('.pagination-wrap').delegate('.page', 'click', function() {
      const pageNum = $(this).text();
      getData(pageNum);  // 重新加载数据
    });

    $('.pagination-wrap').delegate('.prev-page', 'click', function() {
      const pageNum = parseInt($('.active').text()) - 1;
      getData(pageNum);  // 重新加载数据
    });

    $('.pagination-wrap').delegate('.next-page', 'click', function() {
      const pageNum = parseInt($('.active').text()) + 1;
      getData(pageNum);  // 重新加载数据
    });
  </script>
</body>
</html>

示例二：使用通过 Bootstrap 分页样式实现的分页示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>ajax分页示例</title>
  <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css">
  <style>
    .content-wrap {
      width: 800px;
      margin: 50px auto;
    }

    .list-wrap {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .list-wrap li {
      padding: 10px;
      margin-bottom: 10px;
      border: 1px solid #ccc;
      font-size: 16px;
      font-weight: bold;
    }

    .pagination-wrap {
      margin-top: 20px;
    }

    .pagination-wrap .page-link {
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div class="content-wrap">
    <ul class="list-wrap"></ul>
    <nav class="pagination-wrap" aria-label="Page navigation example">
      <ul class="pagination"></ul>
    </nav>
  </div>

  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script>
    // 获取数据的地址
    const URL = "http://httpbin.org/get";

    // 获取数据的方法
    function getData(pageNum) {
      $.ajax({
        url: URL,
        type: "get",
        data: {
          pageNum: pageNum // 当前页数
        },
        dataType: "json",
        success: function(res) {
          let html = '';

          for (let i = 0; i < 5; i++) {
            html += '<li>这是第 '+ (pageNum*5 + i+1) +' 条数据</li>';
          }

          $('.list-wrap').empty().append(html);

          let totalPage = 10;

          $('.pagination-wrap ul').empty();

          let prevHtml = '<li class="page-item"><a class="page-link prev-page" href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>';
          let nextHtml = '<li class="page-item"><a class="page-link next-page" href="#" aria-label="Next"><span aria-hidden="true">&raquo;</span></a></li>';
          let pageHtml = '';

          for (let i = 1; i <= totalPage; i++) {
            if (i === pageNum) {
              pageHtml += '<li class="page-item active"><a class="page-link" href="#">' + i + '</a></li>';
            } else {
              pageHtml += '<li class="page-item"><a class="page-link page" href="#">' + i + '</a></li>'
            }
          }

          $('.pagination-wrap ul').append(prevHtml).append(pageHtml).append(nextHtml);
        }
      })
    }

    getData(1);

    // 绑定分页组件点击事件
    $('.pagination-wrap').delegate('.page', 'click', function() {
      const pageNum = $(this).text();
      getData(pageNum);  // 重新加载数据
    });

    $('.pagination-wrap').delegate('.prev-page', 'click', function() {
      const pageNum = parseInt($('.active').text()) - 1;
      getData(pageNum);  // 重新加载数据
    });

    $('.pagination-wrap').delegate('.next-page', 'click', function() {
      const pageNum = parseInt($('.active').text()) + 1;
      getData(pageNum);  // 重新加载数据
    });
  </script>
</body>
</html>

以上就是完成 ajax 分页的详细攻略。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：用jQuery中的ajax分页实现代码 - Python技术站