Sometimes, such a total of 100 pages, not necessarily only header, footer, button, pages 10 and 10 show,
Show top, middle page, before and after the footer, this page is three, the other page is also a good choice will be omitted.
For example, the following page:
First, the page layout is very simple, in two lines of text, a display of the current number of pages, and set a total number of pages. It is assumed that the total number of pages 40 pages.
Then, with a id = "pagingDiv" div placement of pagination links.
<!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>The key is following the script.
<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 = "";
//这里是加载省略号的flag
var 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)' onclick='pagingConstruct(" + i + ")'>" + i + "</a> ";
isHiddenExist = 0;
}
//否则就构造...
else {
if (isHiddenExist == 0) {
pagingDivInnerHTML += "...";
isHiddenExist = 1;
}
}
}
}
//把构造的内容放上去pagingDiv
document.getElementById("pagingDiv").innerHTML = pagingDivInnerHTML;
}
</script>
This isHiddenExist mean, if constructed a ... little point, we would not have constructed. When you come across content is not omitted, then construct ...
Reprinted from: https://blog.csdn.net/yongh701/article/details/45031031