ajax无刷新分页的简单实现

实现ajax无刷新分页，需要以下步骤：

步骤一：用ajax获取数据

首先，需要在页面上设置一个分页元素，比如一个分页按钮或者数字列表，当用户点击分页元素时，通过ajax向服务器获取数据。在调用ajax的过程中，需要设定请求方式、请求地址、数据类型等参数，其中请求地址需要根据当前分页数计算。

以下是一个示例代码：

$(function() {
  // 设置分页元素点击事件
  $(".pagination a").click(function() {
    var url = $(this).attr("href"); // 获取请求地址
    $.ajax({
      url: url, // 请求地址
      type: 'get',
      dataType: 'json',
      success: function(data) {
        // 处理分页后的数据
      },
      error: function() {
        // 处理错误
      }
    });
    return false; // 阻止默认事件
  });
});

步骤二：用服务器端语言生成数据

在服务器端，需要用相应的语言（比如PHP）生成相应的数据。通常我们需要发送一个分页请求，返回对应的数据。

以下是一个示例代码：

// 获取当前页数，假设当前页为$pageNum
$pageNum = isset($_GET['pageNum']) ? intval($_GET['pageNum']) : 1;

// 获取数据总数，假设数据总共有$total
$total = 100;

// 每页数据量，假设每页显示10条
$pageLength = 10;

// 计算总页数
$totalPage = ceil($total/$pageLength);

// 分页数据
$data = array();
for($i=($pageNum-1)*$pageLength;$i<$pageNum*$pageLength;$i++) {
  if($i >= $total) break;
  array_push($data, $i);
}

// 返回ajax数据
$result = array(
  'data'      => $data, 
  'pageNum'   => $pageNum, 
  'totalPage' => $totalPage
);
echo json_encode($result);

在这段代码中，我们通过获取当前页数$_GET['pageNum']和每页数据量来进行计算，最终生成分页数据，然后返回给ajax调用。

以上就是ajax无刷新分页的简单实现攻略。

以下是两个示例说明：

示例一：分页数字列表

我们可以在页面上生成一个数字列表，用来代表分页信息。比如说：

<div class="pagination">
  <ul>
    <?php for($i=1;$i<=$totalPage;$i++) { ?>
      <li><a href="/getPageData.php?pageNum=<?php echo $i; ?>"><?php echo $i; ?></a></li>
    <?php } ?>
  </ul>
</div>

当用户点击数字列表时，ajax会向服务器请求对应的分页数据，然后将数据渲染到页面上。

示例二：瀑布式分页

我们可以将分页数据以瀑布式呈现，用类似网格布局的方式展示。这样的样式非常时尚，可以提高页面的用户体验和交互性。

以下是一个瀑布式分页的示例：https://www.flickr.com/photos/tags/beauty/?page=2

我们可以看到，在页面上展示了很多美女的照片，同时每次翻页时，页面都会自动加载新的照片数据，而不需要刷新整个页面，这样的交互方式对用户来说非常友好。