html翻页插件,前端开发js分页插件

最新推荐文章于 2025-05-07 11:04:14 发布

weixin_39599454

最新推荐文章于 2025-05-07 11:04:14 发布

阅读量394

点赞数

文章标签： html翻页插件

本文详细介绍了如何使用JavaScript实现一个自定义的分页功能，包括页面跳转、上一页/下一页操作、页码显示逻辑，并且包含了分页大小和总页数的动态调整，以及对超出范围输入的验证，确保了用户友好的交互体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

/p>

Page Demo

#pageControl a{min-width:30px;width:auto;height:25px;line-height:25px;margin-left:10px;border:1px solid #ddd;display:inline-block;text-align: center;border-radius:4px;cursor:pointer;color:#1159bb}

#pageControla:hover{background-color:#0434b3;color:white;}

.etc{border:0!important;}

.front,.next{width:70px!important;}

#pageControl.select{color:#ff1a00;border:0;font-weight:bold;}

.disable{color:#ddd!important;}

.disable:hover{background-color:white!important;}

.jumpContainer{color:gray;margin:0px10px;font-size:13px;}

.box{width:40px;margin:0px10px;text-align: center}

.choice{margin:10px0px20px10px;}

.choicespan{margin-right:20px;}

.choiceinput{width:40px;margin:10px;}

总共页

一组页

(function () {

var Page = (function () {

var Page = function (obj) {

return fn.init(obj);

}

var fn = Page.prototype = {

init: function (obj) {

if (obj.pageSie > obj.pageCount) {

alert(“分页数小于总页数不合法”);

return;

}

this.pageCount = obj.pageCount;//总页数

this.pageSize = obj.pageSize || 7;//分页大小一开始最多显示几页默认7

this.pageNow = obj.pageNow || 1;//当前页

this.containerId = obj.id;//装页码的容器

this.container = document.getElementById(this.containerId);

fn.drawPage();

return this;

drawPage: function () {

this.container.innerHTML = “”;

var front = document.createElement(“a”);

var next = document.createElement(“a”);

this.acontainer = document.createElement(“sapn”);

front.innerHTML = “上一页”;

next.innerHTML = “下一页”;

front.className = “front”;

next.className = “next”;

this.container.appendChild(front);//上一页放在container 中

front.onclick = function () {

fn.frontOrNext(this, true);

}

next.onclick = function () {

fn.frontOrNext(this, false);

}

this.front = front;

this.next = next;

if (this.pageCount <= this.pageSize) {

front.className += ” disable”;

next.className += ” disable”;

for (var i = 0; i < this.pageCount; i++) {

var a = document.createElement(“a”);

a.innerHTML = i + 1;

a.onclick = function () {

Page.alert(this.innerHTML);

Page.select(this, “select”);

}

this.acontainer.appendChild(a);//页码放在acontainer 中

if (i + 1 == this.pageNow) a.className = “select”;//当前页样式为select

}

} else {

/*——————————-总页数多余pageSize——————-*/

var etc2 = document.createElement(“a”);

etc2.innerHTML = “…”;

etc2.className = “etc”;

if (this.pageNow <= this.pageSize – 1) {

for (var i = 0; i < this.pageSize; i++) {

var a = document.createElement(“a”);

a.innerHTML = i + 1;

a.onclick = function () {

fn.pageNow = this.innerHTML;

Page.alert(this.innerHTML);

Page.select(this, “select”);

fn.check();

if (fn.pageNow >= fn.pageSize – 1) {

fn.reset();

}

etc2.className = “etc”;

}

this.acontainer.appendChild(a);//页码放在acontainer 中

if (i + 1 == this.pageNow) a.className = “select”;//当前页样式为select

}

fn.check();

this.acontainer.appendChild(etc2);

} else {

fn.reset();

}

var jumpContainer = document.createElement(“span”);//放置页码跳转的容器

var span1 = document.createElement(“span”);

var span2 = document.createElement(“span”);

var inputBox = document.createElement(“input”);

var button = document.createElement(“input”);

inputBox.value = 1;

button.value = “确定”;

button.type = “button”;

inputBox.className = “box”;

this.inputBox = inputBox;

button.onclick = function () {

var page = fn.inputBox.value.trim();

fn.jump(page);

}

span1.innerHTML = “共” + this.pageCount + “页”;

span2.innerHTML = “跳转到”;

span1.className = “jumpContainer”;

span2.className = “jumpContainer”;

span2.appendChild(inputBox);

span2.appendChild(button);

jumpContainer.appendChild(span1);

jumpContainer.appendChild(span2);

this.container.appendChild(this.acontainer);//绘制页码

this.container.appendChild(next);//下一页放在container

this.container.appendChild(jumpContainer);

frontOrNext: function (

if (

return;//如果上一页下一页显示为不可点击，退出

}

if (isFront) {

this.pageNow–;

Page.alert(this.pageNow);

//上一页

} else {

this.pageNow++;

Page.alert(this.pageNow);

//下一页

}

this.judge();

judge: function () {

if (this.pageNow – this.start > 2) {

this.reset();

} else {

this.drawPage();

}

jump: function (page) {

if (page > this.pageCount) {

alert(“超出范围”);

return;

}

this.pageNow = page;

Page.alert(this.pageNow);

if (this.pageNow – this.start > 2) {

this.reset();

} else {

this.drawPage();

}

check: function () {

if (this.pageNow <= 1) {

this.front.className += ” disable”;

} else {

this.front.className = “front”;

}

reset: function () {

this.acontainer.innerHTML = “”;

var a1 = document.createElement(“a”);

var a2 = document.createElement(“a”);

var etc1 = document.createElement(“a”);

var etc2 = document.createElement(“a”);

a1.innerHTML = “1”;

a2.innerHTML = “2”;

etc1.innerHTML = “…”;

etc2.innerHTML = “…”;

etc1.className = etc2.className = “etc”;

this.front.className = “front”;

a2.onclick = a1.onclick = function () {

fn.pageNow = this.innerHTML;

Page.alert(this.innerHTML);

Page.select(this, “select”);

fn.drawPage();

return;

}

this.acontainer.appendChild(a1);

this.acontainer.appendChild(a2);

this.acontainer.appendChild(etc1);

var start;

/*调整*/

start = this.pageNow – Math.ceil((this.pageSize – 2) / 2) + 1;

(start >= this.pageCount – (this.pageSize – 2) + 1) ? (start = (this.pageCount – (this.pageSize – 2) + 1), this.isEnd = true) : (this.isEnd = false);//起始页码判断

this.start = start;

for (var i = 0; i < this.pageSize – 2; i++) {

var a = document.createElement(“a”);

a.innerHTML = start + i;

a.onclick = function () {

fn.pageNow = this.innerHTML;

Page.alert(this.innerHTML);

Page.select(this, “select”);

fn.judge();

}

this.acontainer.appendChild(a);//页码放在acontainer 中

if ((start + i) == this.pageNow) a.className = “select”;