已知数组Ajax分页

<?

$stamp_result =array(0=>'xx',1=>'kk',2=>'gfyfu',3=>'oio',

4=>'ydftd',5=>'fufty',6=>'jugtyu',7=>'kjh',8=>'pop',9=>'ssaas');

//$page_count = count($a);
$page_size = 4;//一页显示数
//$page_no = $_REQUEST['page_no'];
$page_no=  intval($_REQUEST['page_no']);//取得当前页
if (!$page_no || $page_no < 0) {
 $page_no= 1;
}
//$iPagesize = isset($_REQUEST["pagesize"]) ? (int)trim($_REQUEST["pagesize"]) : 2;
//$iPageno = isset($_REQUEST["pageno"]) ? (int)trim($_REQUEST["pageno"]) : 1;


//$page_size = 16;
$total = count($stamp_result);//总记录数
$max_page = ceil($total/$page_size);//需要显示几页
$page_no = min($max_page,$page_no);//当前页
$start = ($page_no-1)*$page_size;

//要判断最后一页剩几个  然后循环几次
$residue = ($page_no >= $max_page) ? $total%$page_size : 0;
$page_size = ($residue >0) ? $residue : $page_size;
 

//默认page_no为1,显示第一页的数据
if ($total > 0) {
 for ($k=0; $k<
$max_page; $k++){
  $start_id = $k+$start;
   echo $start_id+1;
 }

我的文章列表一地址为https://fcw66.xyz/?thread-1.htm 其中后缀是文章地址二为https://fcw66.xyz/?thread-2.htm 请把下面这个代码绑定到我这个论坛上 这样我就能实现不用后台也可以更新这个代码的文章列表了<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>简约文章列表</title> <style> /* 基础样式 */ * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', sans-serif; } body { background: #f5f5f5; padding: 40px 20px; } /* 容器样式 */ .container { max-width: 800px; margin: 0 auto; background: white; border-radius: 15px; box-shadow: 0 3px 15px rgba(0,0,0,0.1); padding: 30px; } /* 标题样式 */ .title { text-align: center; color: #333; margin-bottom: 30px; font-size: 24px; } /* 文章列表项 */ .article-item { padding: 18px 25px; margin: 10px 0; background: #fff; border: 1px solid #eee; border-radius: 8px; cursor: pointer; transition: all 0.3s; font-size: 16px; } .article-item:hover { transform: translateX(5px); box-shadow: 0 2px 8px rgba(0,0,0,0.1); border-color: #007bff; } /* 分页容器 */ .pagination { display: flex; justify-content: center; margin-top: 30px; gap: 8px; } /* 分页按钮 */ .page-btn { padding: 8px 14px; border: none; background: #f8f9fa; border-radius: 6px; cursor: pointer; transition: all 0.2s; color: #333; } .page-btn.active { background: #007bff; color: white; } .page-btn:hover:not(.active) { background: #e9ecef; } </style> </head> <body> <div class="container"> <h1 class="title">文章列表</h1> <!-- 文章列表 --> <div id="articleList"></div> <!-- 分页按钮 --> <div class="pagination" id="pagination"></div> </div> <script> // 模拟数据(实际使用时替换为真实数据) const allArticles = Array.from({length: 25}, (_, i) => ({ id: i+1, title: `第 ${i+1} 篇文章 - ${'示例标题文本示例标题文本'.slice(0, 15)}` })); let currentPage = 1; const itemsPerPage = 10; // 初始化 function init() { renderArticles(); renderPagination(); } // 渲染文章列表 function renderArticles() { const start = (currentPage - 1) * itemsPerPage; const end = start + itemsPerPage; const currentArticles = allArticles.slice(start, end); const html = currentArticles.map(article => ` <div class="article-item"> ${article.title} </div> `).join(''); document.getElementById('articleList').innerHTML = html; } // 渲染分页按钮 function renderPagination() { const totalPages = Math.ceil(allArticles.length / itemsPerPage); let buttons = ''; for(let i=1; i<=totalPages; i++) { buttons += ` <button class="page-btn ${i === currentPage ? 'active' : ''}" onclick="changePage(${i})"> ${i} </button> `; } document.getElementById('pagination').innerHTML = buttons; } // 切换页面 function changePage(page) { currentPage = page; renderArticles(); renderPagination(); } // 初始化加载 init(); </script> </body> </html>
最新发布
03-20
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值