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

来源：互联网发布：南风知我意微盘编辑：程序博客网时间：2024/05/29 07:32

有时候，比如共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 = "";//这里是加载省略号的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>

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

1 0