上海阿里云代理商：ajax分页实例

luotuoemo • 2023年12月28日 14:04 • 阿里云 • 阅读 650

以下是一个基于AJAX的分页实例：

在HTML页面中，添加一个容器元素来显示每一页的内容：
```
<div id="content"></div>
```
添加一个分页导航栏，用于点击切换页码：
```
<div id="pagination"></div>
```

在页面底部导入jQuery库和自定义的JavaScript代码：

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="pagination.js"></script>

在pagination.js文件中，编写AJAX请求和分页逻辑的代码：

$(document).ready(function() {
  var currentPage = 1; // 当前页码

  // 获取并显示指定页码的内容
  function showPage(page) {
 $.ajax({
   url: '/get_page_content.php',
   type: 'GET',
   data: { page: page },
   success: function(response) {
     $('#content').html(response);
     currentPage = page;
   },
   error: function() {
     console.log('Error loading page');
   }
 });
  }

  // 点击页码时切换页面内容
  $(document).on('click', '.pagination-link', function() {
 var page = $(this).data('page');
 if (page != currentPage) {
   showPage(page);
 }
  });

  // 初始化页面，显示第一页内容
  showPage(1);
});

在服务器端的get_page_content.php文件中，处理AJAX请求，根据页码返回对应的内容：

$page = $_GET['page'];
// 根据$page获取相应的内容，可以从数据库中查询或其他方式获取
$content = 'Page ' . $page . ' content';

echo $content;

通过以上代码，你将可以实现一个简单的基于AJAX的分页功能。当用户点击页码时，通过AJAX请求从服务器获取对应页码的内容，并将其显示在页面上。

以下是一个简单的使用Ajax实现分页的例子：

HTML部分：

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    var currentPage = 1;
    
    // 初始化页面数据
    loadPageData(currentPage);
    
    // 点击上一页按钮
    $('#prev-btn').click(function(){
        currentPage--;
        loadPageData(currentPage);
    });
    
    // 点击下一页按钮
    $('#next-btn').click(function(){
        currentPage++;
        loadPageData(currentPage);
    });
    
    // 加载页面数据
    function loadPageData(page) {
        $.ajax({
            url: 'data.php',
            type: 'GET',
            dataType: 'json',
            data: { page: page },
            success: function(data) {
                // 清空表格数据
                $('#table-body').empty();
                
                // 更新表格数据
                $.each(data, function(index, item){
                    $('#table-body').append('<tr><td>' + item.id + '</td><td>' + item.name + '</td><td>' + item.age + '</td></tr>');
                });
                
                // 更新当前页数显示
                $('#current-page').text(page);
            },
            error: function(xhr, status, error) {
                console.log(error);
            }
        });
    }
});
</script>
</head>
<body>
    <table>
        <thead>
            <th>编号</th>
            <th>姓名</th>
            <th>年龄</th>
        </thead>
        <tbody id="table-body">
            <!-- 表格数据动态加载 -->
        </tbody>
    </table>
    <button id="prev-btn">上一页</button>
    <span id="current-page">1</span>
    <button id="next-btn">下一页</button>
</body>
</html>

PHP部分（data.php）：

<?php
// 模拟数据库查询，返回数据
$data = array();

// 获取当前页数
$page = isset($_GET['page']) ? intval($_GET['page']) : 1;

// 每页显示的记录数
$pageSize = 10;

// 总记录数
$total = 100;

// 总页数
$totalPage = ceil($total / $pageSize);

// 计算偏移量
$offset = ($page - 1) * $pageSize;

// 查询数据
for ($i = $offset; $i < ($offset + $pageSize); $i++) {
    $data[] = array(
        'id' => $i + 1,
        'name' => 'User' . ($i + 1),
        'age' => 20 + $i % 10
    );
}

// 返回数据
header('Content-Type: application/json');
echo json_encode($data);

上述例子中，前端页面通过点击“上一页”和“下一页”按钮来切换页码并使用Ajax请求服务器端的数据。服务器端使用PHP模拟数据库查询，返回相应的数据。前端页面在接收到数据后更新表格内容和当前页数的显示。

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