javascript分页代码(当前页码居中)
发布时间:2024-07-12 17:45:06
标签:javascript分页
function setPage(opt){
if(!opt.pageDivId || opt.allPageNum < opt.curpageNum || opt.allPageNum < opt.showPageNum){return false};
var allPageNum = opt.allPageNum; //总的页数
var showPageNum = opt.showPageNum; //显示的页数
var curpageNum = opt.curpageNum; // 当前的页数
var pageDIvBox = document.getElementById(opt.pageDivId);
//左边或右边显示页码的个数
var lrNum = Math.floor(showPageNum/2);
if(curpageNum>1){
var oA = document.createElement('a');
oA.href='#1';
oA.innerHTML = '首页'
pageDIvBox.appendChild(oA);
}
if(curpageNum>1){
var oA = document.createElement('a');
oA.href='#'+(curpageNum-1);
oA.innerHTML = '上一页'
pageDIvBox.appendChild(oA);
}
if(curpageNum<showPageNum-2 || allPageNum == showPageNum){
for(var i=1;i<=showPageNum;i++){
var oA = document.createElement('a');
oA.href = '#'+i;
if(curpageNum==i){
oA.innerHTML = i;
}else{
oA.innerHTML = "[" + i + "]";
}
pageDIvBox.appendChild(oA);
}
}else{
//倒数第一页的处理
if(allPageNum-curpageNum<lrNum && curpageNum == allPageNum-1){
for(var i=1;i<=showPageNum;i++){
console.log((curpageNum - showPageNum + i));
var oA = document.createElement('a');
oA.href = '#'+ (curpageNum - (showPageNum-1) + i);
if(curpageNum == (curpageNum - (showPageNum-1) + i)){
oA.innerHTML = (curpageNum - (showPageNum-1) + i)
}else{
oA.innerHTML = '['+(curpageNum - (showPageNum-1) + i)+']'
}
pageDIvBox.appendChild(oA);
}
}
//最后一页的处理
else if(allPageNum-curpageNum<lrNum && curpageNum == allPageNum){
for(var i=1;i<=showPageNum;i++){
console.log((curpageNum - showPageNum + i));
var oA = document.createElement('a');
oA.href = '#'+ (curpageNum - showPageNum + i);
if(curpageNum == (curpageNum - showPageNum + i)){
oA.innerHTML = (curpageNum - showPageNum + i)
}else{
oA.innerHTML = '['+(curpageNum-showPageNum + i)+']'
}
pageDIvBox.appendChild(oA);
}
}else{
for(var i=1;i<=showPageNum;i++){
var oA = document.createElement('a');
oA.href = '#'+ (curpageNum - (showPageNum-lrNum) + i);
if(curpageNum == (curpageNum - (showPageNum-lrNum) + i)){
oA.innerHTML = (curpageNum - (showPageNum-lrNum) + i)
}else{
oA.innerHTML = '['+(curpageNum - (showPageNum-lrNum) + i)+']'
}
pageDIvBox.appendChild(oA);
}
}
}
if(curpageNum<allPageNum){
for(var i=1;i<=2;i++){
if(i==1){
var oA = document.createElement('a');
oA.href='#'+(parseInt(curpageNum)+1);
oA.innerHTML = '下一页'
}else{
var oA = document.createElement('a');
oA.href='#'+allPageNum;
oA.innerHTML = '尾页'
}
pageDIvBox.appendChild(oA);
}
}
var oA = document.getElementsByTagName('a');
//给页码添加点击事件
for(var i=0;i<oA.length;i++){
oA[i].onclick = function(){
//当前点的页码
var sHref = this.getAttribute('href').substring(1);
//清空页数显示
pageDIvBox.innerHTML = '';
setPage({
pageDivId:'page',
showPageNum:5, //显示的个数
allPageNum:10, //总页数
curpageNum:sHref //当前页数
})
}
}
}
window.onload = function(){
setPage({
pageDivId:'page',
showPageNum:5, //显示的个数
allPageNum:10, //总页数
curpageNum:1 //当前页数
})
}
昨天看了妙味课堂的 分页视频教程,今天自己参照其思路,自己写了下,并且自己新增了一个‘显示页码个数'的属性 ‘showPageNum';
下面对关键的几个地方做个总结:
1.点击的当前页码需要在显示的页码中居中;
无论是显示 3页 5页 7页 9页…… 等等
当前页要居中,可以推出一个公式
用显的页码个数除以2 再取整,就可以得到左右需要显的页码个数。这个对后面的分页判断很有用
var lrNum = Math.floor(showPageNum/2);
2.获取页码
this.getAttribute('href') 用它可以得到相对路径;this.href 用它只能得到绝对路径


猜你喜欢
- 直接进入正题解析字符串对象我们都知道,JavaScript对象可以序列化为JSON,JSON也可以解析成对象,但是问题是如果出现了一个既不是
- 一、编写Python脚本[root@lidabai ~]# vim harbor_clearimage.py# -*- coding:utf
- 可编辑table及其中加入下拉选项<template> <div> &
- Python中print()函数的方法是打印指定的内容。在交互环境中输入“help(print)”指
- 在Dreamweaver 4.0中,我们就已接触了模板与库的概念,知道它们是批量生成风格类似的网页的好工具。如今在Dreamweaver M
- Python字典中的键是唯一的,但不同的键可以对应同样的值,比如说uid,可以是1001。id同样可以是1001。这样的话通过值来获取指定的
- SQL查询输出,根据表内某字段为准,输出不重复记录,或删除掉重复的记录,保留所需要的记录。今儿见一朋友在蓝色里问起(查询不重复记录~),想想
- 作为一门脚本语言,写脚本时执行系统命令可以说很常见了,python提供了相关的模块和方法。os模块提供了访问操作系统服务的功能,由于涉及到操
- 本文实例分析了MySQL索引用法。分享给大家供大家参考,具体如下:MYSQL描述:一个文章库,里面有两个表:category和article
- 当我们建好数据库及表后,首先想到的就是向数据库的表中输入数据.下面我们就来探讨一下如何向数据库增加数据:1.常用的方法是insert语句in
- 在这篇文章里,我们会聊一聊为什么 Python 决定不支持 switch 语句。为什么想要聊这个话题呢?主要是因为 switch 在其它语言
- 写一个循环删除的过程。 create or replace procedure delBigTab(p_TableName in varch
- python的matplotlib包支持我们画图,有点非常多,现学习如下。首先要导入包,在以后的示例中默认已经导入这两个包import ma
- Hello,各位读者朋友们好啊,我是小张~这不国庆嘛,就把最近很火的一个韩剧《鱿鱼游戏》刷了下,这部剧整体剧情来说还是非常不错的,很值得一看
- 1、灵活运用样式熟悉网页设计的网友就知道,调用Style的方法很多,我们可以单击鼠标右键选择Custo
- 这篇文章主要介绍了基于python3实现倒叙字符串,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可
- 标量标量由普通小写字母表示(例如,x、y和z)。我们用 R \mathbb{R} R表示所有(连续)实数标量的空间。标量由只有一个元素的张量
- 一、安装mod_wsgi 3.4:./configure --with-apxs=/Users/levin/dev/apache2.2.27
- 在刚学Pandas时,行选择和列选择非常容易混淆,在这里进行一下讨论和归纳本文的数据来源:https://github.com/fiveth
- mysql replace实例说明:UPDATE tb1 SET f1=REPLACE(f1, 'abc', 'de