【JavaScript】一个简单的分页，显示页首，中间页，页尾，当前页的前后三页，省略其它页

有时候，比如共100页，并不一定要仅提供页首、页尾按钮，然后10页10页显示，

显示页首，中间页，页尾，当前页的前后三页，省略其它页也是一种不错的选择。

比如如下的分页：

首先，页面布局很简单，两个行内文本，一个显示当前的页数，与设定一个总页数。这里假定总页数共40页。

然后，用一个id="pagingDiv"的div放置分页链接。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>分页</title></head><body>第<span id="pagingText"></span>页，共<span id="total">40</span>页<div id="pagingDiv"></div></body>
</html>

关键是如下的脚本。

<script>//首先获取当前的总页数，一般是后台传递过来的，这里假定40页。var total = document.getElementById("total").innerHTML;//id="pagingDiv"的div通过pagingConstruct函数构造，比如加载网页是第1页的pagingConstruct(1);//形式参数paging是指当前页function pagingConstruct(paging){//先更新一下行内文本document.getElementById("pagingText").innerHTML = paging;var pagingDivInnerHTML = "";//这里是加载省略号的flagvar isHiddenExist = 0;//从第1页读到第40页。for (var i = 1; i <= total; i++) {//如果读到当前页，就仅仅加载一个文本，不放链接if (i == paging) {pagingDivInnerHTML += i + " ";}else {//如果是页首，中间页，页尾，当前页的前后三页则不省略。if (i < 4 || i < (paging + 3) && i > (paging - 3) || i > (total / 2 - 2) && i < (total / 2 + 2) || i > (total - 3)) {pagingDivInnerHTML += "<a href='javascript:void(0)' οnclick='pagingConstruct(" + i + ")'>" + i + "</a> ";isHiddenExist = 0;}//否则就构造...else {if (isHiddenExist == 0) {pagingDivInnerHTML += "...";isHiddenExist = 1;}}}}//把构造的内容放上去pagingDivdocument.getElementById("pagingDiv").innerHTML = pagingDivInnerHTML;}
</script>

这个isHiddenExist的意思，是如果构造了一次...点点点，就不要再构造了。当你遇到不省略的内容之后，再构造...

【JavaScript】一个简单的分页，显示页首，中间页，页尾，当前页的前后三页，省略其它页相关推荐

2020 用html做一个简单的时间显示（12小时制）
用前端html做一个简单的时间显示(12小时制) 如图所示显示年月日.时间.上下午以及星期几功能: 1. 此代码解决时间比如秒数为单数时,在前面补0 //值小于10时,在前面补0 functio ...
用vue element-ui分页组件构建一个简单的分页 ( 超详细 )
element-ui分页组件: 以下代码都是干货,欢迎大家互相评论学习方法一数据绑在div上: <template> <div><div v-for="(v ...
php安卓和苹果兼容问题,javascript - 一个简单的H5页面在安卓手机上能跑，在苹果手机上和谷歌浏览器上却出错。...
最近调用百度翻译API做了一个翻译小demo,css方面用了bootstrap,然后自己稍微改了一点样式. js部分很简单,按照百度api文档的规则生成一个 url地址+查询字符串,然后再通过get方 ...
pagination jquery最简单的分页【无刷新和刷新都通用】
参数说明参数名描述参数值 maxentries 总条目数必选参数,整数 items_per_page 每页显示的条目数 ...
php分页显示类——在线拍卖行（1）
`自己周末做了一个在线拍卖行,虽然没有很好看的界面,但是上架商品,竞价,展示商品,展示热门商品等已经都有了,自己现在把里面用到的东西一点点写出来为以后复习用. 首先就是一个php的分页显示 ...
富士通打印机调整位置_打印机页首空调整和左边距调整
存折打印机页首空调整和左边距调整一.名词解析 1. 页首空调整: 打印纸的上边距到打印第一行内容的距离称为页顶边距 (或页首空. 页顶进纸量. 首行. 吸入纸量) ,出现打印内容偏上或偏下这种情况一 ...
自己动手写一个简单的php模板引擎
模板引擎中最核心的思想是:将模板中的变量编译为php的变量进行输出. 例如:demo.tpl {$data} {$title} 那么模板引擎就要将{$data} {$title} 编译为 <?p ...
Protues的一个简单51程序仿真
Protues的一个简单51程序仿真一.组装原件步骤二.代码编写三.仿真结果四.总结一.组装原件步骤 1.创建一个新的工程 2.找原件 3.将各元件连接起来,构成原理图二.代码编写 1.打 ...
【java文本处理】实现一个简单的小说文本阅读器（分页、翻页、页码跳转）
一.目的读出文本(.txt)内容显示至dos命令窗: 按规定行数将文本进行分页: 在dos下实现文本翻页.页码跳转等功能,形成简单小说阅读器. 二.主要方法 1. RandomAccessFile类 ...

【JavaScript】一个简单的分页，显示页首，中间页，页尾，当前页的前后三页，省略其它页

【JavaScript】一个简单的分页，显示页首，中间页，页尾，当前页的前后三页，省略其它页相关推荐

最新文章

热门文章