无法将数据加载到jQuery分页组件，需实现上下页按钮及按页码追加数据

嘿，我看你已经迈出了分页的第一步——能显示页码，但卡在了按钮功能和数据动态加载上，这俩是分页的核心环节，我来帮你一步步搞定：

1. 实现上一页/下一页按钮 #

首先，你需要先在页面里添加上下一页的按钮元素，然后通过jQuery绑定点击事件来控制页码的切换，同时要处理边界情况（比如第一页时上一页不能点击，最后一页时下一页禁用）。

步骤： #

• 先在分页区域添加按钮：

<div class="pagination-controls">
  <button id="prev-page" disabled>上一页</button>
  <div id="page-numbers"></div>
  <button id="next-page">下一页</button>
</div>

• 然后在JS里定义当前页码变量，绑定按钮事件：

var celivalue = 66; // 总数据项数
var PerPageCount = 25; // 每页显示数量
var currentPage = 1; // 当前页码
var totalPages = Math.ceil(celivalue / PerPageCount); // 计算总页数

// 上一页点击事件
$('#prev-page').click(function() {
  if (currentPage > 1) {
    currentPage--;
    updatePagination();
    loadPageData(currentPage);
  }
});

// 下一页点击事件
$('#next-page').click(function() {
  if (currentPage < totalPages) {
    currentPage++;
    updatePagination();
    loadPageData(currentPage);
  }
});

// 更新按钮状态和页码显示
function updatePagination() {
  // 控制按钮禁用状态
  $('#prev-page').prop('disabled', currentPage === 1);
  $('#next-page').prop('disabled', currentPage === totalPages);
  
  // 给当前页码添加高亮样式
  $('#page-numbers .page-item').removeClass('active');
  $('#page-numbers .page-item[data-page="' + currentPage + '"]').addClass('active');
}

2. 根据页码变量追加数据 #

你原来的循环是固定从i=2开始，这显然没法适配不同页码。我们需要根据当前页码计算出该页应该显示的数据范围，然后循环生成对应的内容块。

改写数据加载函数： #

// 加载指定页码的数据
function loadPageData(page) {
  var startIndex = (page - 1) * PerPageCount + 1; // 起始索引（可根据你的数据起始值调整）
  var endIndex = Math.min(page * PerPageCount, celivalue); // 结束索引，不超过总数据数
  
  // 先清空容器，避免重复追加内容
  $('#search-result-container').empty();
  
  // 循环生成当前页的内容
  for (var i = startIndex; i <= endIndex; i++) {
    // 确保branchName、lat、lang、landmark等变量在当前作用域可用
    var searchresultDiv = '<div class="panel panel-default searchhotel_box" data-id="' + i + '">' + 
                          '<div class="panel-body" data-hotel-name="' + branchName + 
                          '" data-latitude="' + lat + '" data-longitude="' + lang + 
                          '" data-landmark="' + landmark + '">' + 
                          // 补全你原来的内容结构
                          '</div></div>';
    
    // 将生成的内容追加到页面容器中
    $('#search-result-container').append(searchresultDiv);
  }
}

初始化调用 #

页面加载完成后，记得初始化第一页的数据和分页状态：

$(document).ready(function() {
  // 生成页码列表（整合你原有的页码生成逻辑）
  generatePageNumbers();
  // 加载第一页数据
  loadPageData(currentPage);
  // 更新分页控件状态
  updatePagination();
});

// 生成页码列表的函数
function generatePageNumbers() {
  var pageNumbersHtml = '';
  for (var i = 1; i <= totalPages; i++) {
    pageNumbersHtml += '<span class="page-item" data-page="' + i + '">' + i + '</span>';
  }
  $('#page-numbers').html(pageNumbersHtml);
  
  // 绑定页码点击事件
  $('.page-item').click(function() {
    currentPage = parseInt($(this).data('page'));
    updatePagination();
    loadPageData(currentPage);
  });
}

注意点 #

• 确保branchName、lat、lang、landmark这些变量在loadPageData函数里能正常访问，如果是异步获取的数据，要等数据加载完成后再初始化分页。
• 如果你的数据来自后端接口，建议把loadPageData改成AJAX请求，将page和PerPageCount作为参数传给后端，由后端返回对应页的数据（后端分页更适合动态数据场景）。

内容的提问来源于stack exchange，提问作者Satish Kilari