侧边栏壁纸
博主头像
落叶人生博主等级

走进秋风,寻找秋天的落叶

  • 累计撰写 130562 篇文章
  • 累计创建 28 个标签
  • 累计收到 9 条评论
标签搜索

目 录CONTENT

文章目录

分页 前端

2023-01-21 星期六 / 0 评论 / 0 点赞 / 73 阅读 / 3920 字

<!DOCTYPE html><html><head><meta charset="utf-8" /><title>js分页</title><style type="text/css">body {

... .

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>js分页</title>
<style type="text/css">
body { margin: 0; padding: 0; }
.pagination { color: #333; text-align: center; margin: 8px; }
.pagination span { color: #999; margin: 0 1px; padding: 3px 6px; border: 1px solid #ccc; }
.pagination span.on { background-color: #337ab7; color: #fff; font-weight: bold; border: 1px solid #333; }
.pagination a { color: #00f; text-decoration: none; }
.pagination a span { border: 1px solid #66c; color: #33f; }
#pager { margin: 20px; padding: 4px; }
#content { text-align: center; }
</style>
</head>

<body>
<div id="pager"></div>
<div id="content"></div>
<script>
var currentPage = 1; // 当前页码,从1开始
var pageSize = 5; // 每页显示记录数
var maxButtons = 10; // 显示的分页按钮数量
var totalNumber = 30; // 记录总数
var totalPage = parseInt(Math.ceil(totalNumber / pageSize)); // 总页数
initPage();

function initPage() { //循环生成数组 var arr = []; for (var o = 0; o < totalNumber; o++) { arr.push(o); } //每一页第一个li var rangeStartitem = (currentPage - 1) * pageSize; //开始页 var rangeStart = Math.max(1,currentPage - parseInt(maxButtons / 2)); //最后一页 var rangeEnd = Math.min(totalPage,rangeStart + maxButtons - 1); var constr = pageCon(arr,rangeStartitem,pageSize); var divcontent = document.getElementById("content"); divcontent.innerHTML = constr; //创建分页模板 var str = ""; str += "<div class=‘pagination‘>"; str += "当前第" + currentPage + "页" //如果总页数大于1 if (totalPage > 1) { //当前页不是第一页 if (currentPage != 1) { str += ‘<a href="#!" data-num="1"><span>|&lt;</span></a>‘; str += ‘<a href="#!" data-num="‘ + (currentPage - 1) + ‘"><span>&lt;&lt;</span></a>‘; } else { //如果是第一页,禁用上一页按钮 str += ‘<span>|&lt;</span>‘; str += ‘<span>&lt;&lt;</span>‘; } //中间页码 for (var i = rangeStart; i <= rangeEnd; i++) { //如果是当前页的话,就禁用当前页的按钮 if (i == currentPage) { str += ‘<span class="on">‘ + i + "</span>"; } else { //否则就可以点击该页 str += ‘<a href="#" data-num="‘ + i + ‘"><span>‘ + i + "</span></a>"; } } //当前页不是总页,即是最后一页 if (currentPage != totalPage) { str += ‘<a href="#" data-num="‘ + (currentPage + 1) + ‘"><span>&gt;&gt;</span></a>‘; str += ‘<a href="#" data-num="‘ + totalPage + ‘"><span>&gt;|</span></a>‘; } else { //如果是最后页,禁用下一页 str += ‘<span>&gt;&gt;</span>‘; str += ‘<span>&gt;|</span>‘; } } str += ‘ 一共‘ + totalPage + ‘页,‘ + totalNumber + ‘条记录 </div>‘; var divpager = document.getElementById("pager"); divpager.innerHTML = str; //获取所有生成的页面链接 var listTag = divpager.getElementsByTagName(‘a‘); //绑定li事件 for (var i = 0; i < listTag.length; i++) { listTag[i].onclick = function() { var currentPage = this.getAttribute(‘data-num‘); nowcurrentPage(currentPage); return false; }; } } //传递页面 function nowcurrentPage(currentPage) { this.currentPage = currentPage; initPage(); } //生成每页的数据 function pageCon(arr,len) { var constr = ‘‘; for (var i = rangeStartitem; i < rangeStartitem + len; i++) { constr += "<li>"+ arr[i] + "</li>"; } return constr; } </script></body></html>

. .. ...

广告 广告

评论区