【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 = "";
		//这里是加载省略号的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)' οnclick='pagingConstruct(" + i + ")'>" + i + "</a> ";
                    isHiddenExist = 0;
                }
				//否则就构造...
                else {
                    if (isHiddenExist == 0) {
                        pagingDivInnerHTML += "...";
                        isHiddenExist = 1;
                    }
                }
            }
        }
		//把构造的内容放上去pagingDiv
        document.getElementById("pagingDiv").innerHTML = pagingDivInnerHTML;
    }
</script>
这个isHiddenExist的意思,是如果构造了一次...点点点,就不要再构造了。当你遇到不省略的内容之后,再构造...

  • 4
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
使用Spire.Doc复制第一页的内容并在页尾插入复制内容,可以使用以下步骤: 1. 首先获取第一页的内容,例如`Section sourceSection = doc.Sections[0]`。 2. 然后将第一页的内容复制到一个新的`Document`对象中,例如`Document newDoc = new Document()`和`newDoc.Sections.Add(sourceSection.Clone())`。 3. 接着获取新文档的最后一页的位置,例如`int lastPageIndex = newDoc.Sections.Count - 1`。 4. 在新文档的最后一页的页尾插入需要添加的内容,例如`newDoc.Sections[lastPageIndex].HeadersFooters.Footer.AddParagraph().AppendText("Footer Text")`。 5. 最后将新文档的内容插入到原始文档的第一页之后,例如`doc.Sections.InsertRange(1, newDoc.Sections)`。 以下是一个完整的示例代码: ``` // 获取原始文档 Document doc = new Document("Original.docx"); // 获取第一页的内容 Section sourceSection = doc.Sections[0]; // 将第一页的内容复制到一个新的文档对象中 Document newDoc = new Document(); newDoc.Sections.Add(sourceSection.Clone()); // 获取新文档的最后一页的位置 int lastPageIndex = newDoc.Sections.Count - 1; // 在新文档的最后一页的页尾插入需要添加的内容 newDoc.Sections[lastPageIndex].HeadersFooters.Footer.AddParagraph().AppendText("Footer Text"); // 将新文档的内容插入到原始文档的第一页之后 doc.Sections.InsertRange(1, newDoc.Sections); // 保存修改后的文档 doc.SaveToFile("Modified.docx", FileFormat.Docx); ``` 上述示例中,`doc`表示需要操作的`Document`对象。使用以上步骤即可完成复制第一页的内容并在页尾插入复制内容的操作。需要注意的是,以上示例仅适用于复制单个页面的内容,如果需要复制多个页面的内容,需要将以上步骤重复执行多次。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值