1.话不多说，直接看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>数据分页算法</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
height: 100px;
border-bottom: 1px solid #000;
}
.menu {
display: inline-block;
}
button {
display: inline-block;
height: 30px;
width: 70px;
line-height: 30px;
cursor: pointer;
}
.menu li {
list-style: none;
width: 30px;
height: 30px;
border: 1px solid#000;
display: inline-block;
text-align: center;
line-height: 30px;
cursor: pointer;
}
.check {
background-color: #999;
color: #000;
}
</style>
</head>
<body>
<div class="box">
<button class="leftbtn">上一页</button>
<ul class="menu">
<li class="check">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
<button class="rightbtn">下一页</button>
<script>
/*
* 基本的分页
* */
var totleNum = 245;//数据总条数
var totlePage = 0;//总共多少页
var nowPage = 0;//当前页
var pageNum = 10;//一页显示多少条数据
var eleindex = 0;//记录当前元素的索引
var save = null;//记录当前谁变色
totlePage = Math.ceil(totleNum / pageNum);//使用向上取整的方法
var leftbtn = document.querySelector(".leftbtn");
var rightbtn = document.querySelector(".rightbtn");
var list_li = document.querySelector(".menu").children;
save = list_li[0];
//上一页
leftbtn.onclick = function () {
eleindex--;
if (eleindex < 0) {
eleindex = 0;
return;
}
changePage(list_li[eleindex]);
nowPage = list_li[eleindex].innerText;
if (list_li[eleindex].innerText >= 6 && list_li[0].innerText != 1 && parseInt(nowPage) + 4 < totlePage) {
changePageNum("up");
}
;
console.log(nowPage);
}
//下一页
rightbtn.onclick = function () {
eleindex++;
if (eleindex > list_li.length - 1) {
eleindex = list_li.length - 1;
return;
}
changePage(list_li[eleindex]);
nowPage = list_li[eleindex].innerText;
if (list_li[eleindex].innerText >= 7 && list_li[list_li.length - 1].innerText != totlePage) {
changePageNum("down");
}
console.log(nowPage);
}
for (var i = 0; i < list_li.length; i++) {
list_li[i].index = i;
list_li[i].onclick = function () {
changePage(this);
eleindex = this.index;
var cknum = parseInt(list_li[eleindex].innerText);
if (cknum + 4 < totlePage && cknum - 5 >= 1) {
var start = cknum - 5;
for (var k = 0; k < list_li.length; k++) {
list_li[k].innerText = start + k;
}
eleindex = 5;
changePage(list_li[eleindex]);
}
if (cknum - 5 < 1) {
for (var k = 0; k < list_li.length; k++) {
list_li[k].innerText = k + 1;
if (list_li[k].innerText == cknum) {
changePage(list_li[k]);
eleindex = k;
}
}
}
if (cknum + 4 >= totlePage) {
for (var k = 0; k < list_li.length; k++) {
list_li[list_li.length - 1 - k].innerText = totlePage - k;
if (list_li[list_li.length - 1 - k].innerText == cknum) {
changePage(list_li[list_li.length - 1 - k]);
eleindex = list_li.length - 1 - k;
}
}
}
nowPage = cknum;
console.log(nowPage);
}
}
//切换页码选择的方法
function changePage(page) {
save.classList.remove("check");
page.classList.add("check");
save = page;
}
/*
* 构造方法 修改li元素的页码值
* */
function changePageNum(res) {
//中间索引
var centerindex = 5;
//切换颜色
changePage(list_li[centerindex]);
eleindex = centerindex;
num(centerindex, "left");
num(centerindex + 1, "right");
function num(dex, way) {
var n = list_li[dex].innerText;
if (res == "up") {
n--;
}
else {
n++;
}
list_li[dex].innerText = n;
if (way == "right") {
dex++;
if (dex > list_li.length - 1) {
return;
}
}
else {
dex--;
if (dex < 0) {
return;
}
}
num(dex, way);
}
}
/*
* 不管是点击上下页 还是点击页面‘
*
* 调用一个方法 传入当前的页码
*
* */
</script>
</div>
</body>
</html>
2.第二种方法，使用for循环
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
height: 100px;
border-bottom: 1px solid #000;
}
button {
display: inline-block;
width: 70px;
height: 30px;
line-height: 30px;
cursor: pointer;
}
.menu {
display: inline-block;
}
.menu > li {
list-style: none;
width: 30px;
height: 30px;
border: 1px solid #cccccc;
display: inline-block;
text-align: center;
line-height: 30px;
cursor: pointer;
}
.check {
background-color: #009fff;
color: #fff;
}
</style>
</head>
<body>
<div class="box">
<button class="leftbtn">上一页</button>
<ul class="menu">
<li class="check">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
<button class="rightbtn">下一页</button>
<script>
/*
* 基本的分页
* */
var totleNum = 242;//数据总条数
var totlePage = 0;//总共多少页
var nowPage = 1;//当前页
var pageNum = 10;//一页显示多少条数据
var save = null;//记录当前谁变色
totlePage = Math.ceil(totleNum / pageNum);//使用向上取整的方法
var leftbtn = document.querySelector(".leftbtn");
var rightbtn = document.querySelector(".rightbtn");
var list_li = document.querySelector(".menu").children;
save = list_li[0];
//上一页
leftbtn.onclick = function () {
if (nowPage <= 1) {
return;
}
nowPage--;
changePage(nowPage);
changePageNum(nowPage);
}
//下一页
rightbtn.onclick = function () {
if (nowPage >= totlePage) {
return;
}
nowPage++;
changePage(nowPage);
changePageNum(nowPage);
}
for (var i = 0; i < list_li.length; i++) {
list_li[i].index = i;
list_li[i].onclick = function () {
nowPage = parseInt(this.innerText);
changePage(nowPage);
changePageNum(nowPage);
}
}
//切换页码选择的方法
function changePage(nowpageinfo) {
save.classList.remove("check");
//根据当前页 找元素
for (var i = 0; i < list_li.length; i++) {
if (list_li[i].innerText == nowpageinfo) {
list_li[i].classList.add("check");
save = list_li[i];
}
}
}
/*
* 构造方法 修改li元素的页码值
* */
function changePageNum(nowpageinfo) {
/*
* 这个考虑前部分 在7之前当前页不走中间
* */
if (nowpageinfo < 6) {
var s = null;
for (var i = 0; i < list_li.length; i++) {
list_li[i].innerText = i + 1;
if (list_li[i].innerText == nowpageinfo) {
s = list_li[i];
}
}
changePage(nowpageinfo);
save = s;
return;
}
/*
* 考虑后部分 最后一页出来了 当前页不走中间
* */
if (nowpageinfo > totlePage - 4) {
var s = null;
for (var i = 0; i < list_li.length; i++) {
list_li[i].innerText = totlePage - list_li.length + i + 1;
if (list_li[i].innerText == nowpageinfo) {
s = list_li[i];
}
}
changePage(nowpageinfo);
save = s;
return;
}
/*
* 考虑中间 当前页走中间
* */
for (var i = 0; i < list_li.length; i++) {
list_li[i].innerText = (nowpageinfo - 5) + i;
}
changePage(nowpageinfo);
}
/*
* 不管是点击上下页 还是点击页面‘
*
* 掉同一个方法 传入当前的页码
*
* */
</script>
</div>
</body>
</html>
扫一扫
306
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
