Ajax无刷新分页_分页

Ajax无刷新分页是一种在不刷新整个页面的情况下，通过异步请求加载和显示数据的技术。这种技术可以大大提高用户体验，使网页浏览更加流畅。

Ajax无刷新分页是一种在不重新加载整个页面的情况下，通过JavaScript和Ajax技术实现数据分页的技术，它可以提高用户体验，减少服务器压力，下面详细介绍如何使用Ajax无刷新分页。

（图片来源网络，侵删）

准备工作

1、引入jQuery库：Ajax无刷新分页需要使用到jQuery库，因此需要在HTML文件中引入jQuery库。

<script src="https://code.jquery.com/jquery3.6.0.min.js"></script>

2、准备HTML结构：创建一个包含分页元素的HTML结构，如<div>元素用于显示分页信息。

<div id="pagination">
  <a href="#" class="pagelink">&laquo;</a>
  <a href="#" class="pagelink">1</a>
  <a href="#" class="pagelink">2</a>
  <a href="#" class="pagelink">3</a>
  <a href="#" class="pagelink">4</a>
  <a href="#" class="pagelink">5</a>
  <a href="#" class="pagelink">&raquo;</a>
</div>

编写JavaScript代码

1、编写Ajax请求函数：使用jQuery的$.ajax()方法发送Ajax请求，获取当前页的数据。

function getData(page) {
  $.ajax({
    url: 'your_server_url', // 服务器地址，根据实际情况修改
    type: 'GET', // 请求类型，根据实际情况修改
    data: {
      page: page, // 当前页码
      pageSize: 10 // 每页显示的数据条数，根据实际情况修改
    },
    success: function(data) {
      // 请求成功后的回调函数，处理返回的数据并更新页面内容
    }
  });
}

2、编写分页点击事件处理函数：为分页元素添加点击事件，当点击某个分页时，调用getData()函数获取对应页的数据并更新页面内容。

$(document).ready(function() {
  var currentPage = 1; // 当前页码，默认为1
  var pageSize = 10; // 每页显示的数据条数，根据实际情况修改
  // 初始化页面内容
  getData(currentPage);
  // 为分页元素添加点击事件
  $('#pagination a').on('click', function(e) {
    e.preventDefault(); // 阻止默认行为，防止跳转页面
    var targetPage = $(this).text(); // 获取点击的分页文本，即目标页码
    if (targetPage !== '&laquo;' && targetPage !== '&raquo;') { // 排除首页和尾页的点击事件
      currentPage = parseInt(targetPage); // 更新当前页码
      getData(currentPage); // 调用getData()函数获取对应页的数据并更新页面内容
    } else {
      // 如果点击的是首页或尾页，可以执行相应的操作，如跳转到第一页或最后一页等
    }
  });
});

通过以上步骤，可以实现一个简单的Ajax无刷新分页功能，在实际项目中，还需要根据具体需求对代码进行优化和完善。

Ajax 无刷新分页是一种常用的技术，可以让用户在浏览网页时实现分页效果而不需要重新加载整个页面，下面是一个简单的示例，展示如何使用 HTML、CSS 和 JavaScript（包含 jQuery）来创建一个带有 Ajax 无刷新分页功能的介绍。

（图片来源网络，侵删）

HTML 部分（index.html）

<!DOCTYPE html>
<html lang="zhCN">
<head>
    <meta charset="UTF8">
    <title>Ajax 无刷新分页示例</title>
    <style>
        /* 在这里添加 CSS 样式 */
        table {
            width: 100%;
            bordercollapse: collapse;
        }
        th, td {
            padding: 8px;
            textalign: left;
            borderbottom: 1px solid #ddd;
        }
        th {
            backgroundcolor: #f2f2f2;
        }
    </style>
</head>
<body>
    <table id="dataTable">
        <thead>
            <tr>
                <th>ID</th>
                <th>名称</th>
                <th>年龄</th>
                <!其他字段 >
            </tr>
        </thead>
        <tbody>
            <!数据将通过 Ajax 动态加载 >
        </tbody>
    </table>
    <div id="pagination">
        <!分页按钮将通过 Ajax 动态生成 >
    </div>
    <script src="https://code.jquery.com/jquery3.6.0.min.js"></script>
    <script>
        // 在这里添加 JavaScript 和 Ajax 代码
        $(document).ready(function() {
            function load_data(page) {
                $.ajax({
                    url: "fetch_data.php",
                    type: "POST",
                    data: {page: page},
                    success: function(data) {
                        $("#dataTable tbody").html(data);
                    }
                });
            }
            load_data(1); // 初始化页面，加载第一页数据
            $(document).on("click", ".pagination a", function(e) {
                e.preventDefault();
                var page = $(this).attr("datapage");
                load_data(page);
            });
        });
    </script>
</body>
</html>

PHP 部分（fetch_data.php）

<?php
$connect = mysqli_connect("主机名", "用户名", "密码", "数据库名");
$page = $_POST["page"];
$limit = 5; // 每页显示的记录数
$start = ($page 1) * $limit;
$query = "SELECT * FROM 表名 LIMIT $start, $limit";
$result = mysqli_query($connect, $query);
while ($row = mysqli_fetch_array($result)) {
    echo '
        <tr>
            <td>' . $row["id"] . '</td>
            <td>' . $row["name"] . '</td>
            <td>' . $row["age"] . '</td>
            <!其他字段 >
        </tr>
    ';
}
// 分页按钮
$query = "SELECT * FROM 表名";
$result = mysqli_query($connect, $query);
$total_rows = mysqli_num_rows($result);
$total_pages = ceil($total_rows / $limit);
echo '<div class="pagination">';
for ($i = 1; $i <= $total_pages; $i++) {
    echo '<a href="#" datapage="' . $i . '">' . $i . '</a>';
}
echo '</div>';
?>

这是一个基础的例子，你可以根据具体需求进行相应的调整和扩展，注意，在实际部署时，你应该确保 PHP 文件中的数据库连接信息是正确的，并且做好相应的安全防护措施（如防止 SQL 注入）。