静态网页分页

以前总是不明白静态网页为什么需要分写，但是如果是一个纯静态的html项目，如果网页内容过多，网页的可读性会变差，所以需要对网页进行分页，对网页分页需要在script标签中写入js代码，写这篇博文时，我参考了网上一位小姐姐的播客，下面奉上小姐姐播客地址：js分页方法
静态网页分页思想其实与传统分页思想一致，下面先贴出一段传统分页的anglar-js代码

 //定义searchMap的数据结构
    $scope.searchMap = {'keywords':'',
                        'category':'',
                        'brand':'',
                        'spec':{},
                        "price":'',
                        "pageNo":1,
                        "pageSize":20,
                        'sortField':'',
                        'sort':''  };

    //完善searchMap
    //添加面包屑
    $scope.addSearchItem=function (key, value) {
        if(key == "category" || key=="brand" || key=='price'){
            $scope.searchMap[key]=value;
        }else{
            $scope.searchMap.spec[key]=value;
        }
        $scope.search();
    };

    //删除面包屑
    $scope.removeSearchItem=function (key) {
        if(key == 'category' || key=='brand'|| key=='price'){
            $scope.searchMap[key]="";
        }else{
            delete  $scope.searchMap.spec[key];
        }
        $scope.search();
    };

    $scope.buildPageLabel=function () {
        //定义一个pageLabel
        $scope.pageLabel=[];
        //从返回的resultMap中获取最大页数
        var maxPageNo = $scope.resultMap.totalPages;
        var firstPage = 1;
        var lastPage = maxPageNo;
        $scope.firstDot=true;//前面有点
        $scope.lastDot=true;//后边有点

        if( $scope.resultMap.totalPages>5){
            //所搜索的页数大于3
            if($scope.searchMap.pageNo<=3){
                lastPage = 5;
                $scope.firstDot = false;
                //所搜索的页数小于靠近总页数
            }else if($scope.searchMap.pageNo>=lastPage-2){
                //设置首页
                firstPage = $scope.resultMap.totalPages-4;
                //隐藏后面的点
                $scope.lastDot=false;
            }else {
                //所搜索的页数正常
                firstPage = $scope.searchMap.pageNo-3;
                lastPage = $scope.searchMap.pageNo+2;
            }
        }else {
                $scope.firstDot=false;//前面无点
                $scope.lastDot=false;//后边无点

        }
        for (let i = firstPage; i <lastPage; i++) {
            $scope.pageLabel.push(i);
        }
    };

    $scope.queryByPage=function (pageNo) {
        if(pageNo<1 || pageNo>$scope.resultMap.totalPages){
            return;
        }
        $scope.searchMap.pageNo = pageNo;
        $scope.search();
    };

    $scope.isTopPage=function () {
        if($scope.searchMap.pageNo == 1){
            return true;
        }else{
            return false;
        }
    };

    $scope.isEndPage=function () {
        if($scope.searchMap.pageNo == $scope.resultMap.totalPages){
            return true;
        }else {
            return false;
        }
    };

    $scope.sortSearch=function (sortField,sort) {
        $scope.searchMap.sortField = sortField;
        $scope.searchMap.sort = sort;
        $scope.search();
    };

	再次给出纯网页的分页代码，给出以下的参考代码：

var obj,j;
        var page =0;
        var currentPage=0;   //当前页
        var pageNum=2;

        var pageChainNum=4;

        var totalNum;       //总条数
        var totalPage;      //总页数

        function upPage(p){
            currentPage = p;
            //先将所有的数据设置为隐藏
            for (var i = 0; i < j; i++) {
                obj[i].style.display="none";
            }

            //显示所要展示的那一页的内容
            for (var k = currentPage*pageNum ; k<(currentPage+1)*pageNum; k++) {
                if(obj[k]){
                    obj[k].style.display="block";
                }
                console.log(i);
            }




            //change the page chain
            var strS ='<a href="###" onclick="upPage(0)">首页</a>  ';

            var pageNumber_2 = pageChainNum %2 === 0 ? Math.ceil(pageChainNum / 2)+1 : Math.ceil(pageChainNum / 2);
            var pageNumber_3 = pageChainNum % 2 === 0 ? Math.ceil(pageChainNum /2) : Math.ceil(pageChainNum/2)+1;

            console.log(pageNumber_2,pageNumber_3);
            var strC = "",startPage,endPage;
            if(pageChainNum>=totalPage){
                startPage = 0;
                endPage = totalPage - 1;
            }else if(currentPage < pageNumber_2){
                startPage = 0;
                endPage = totalPage - 1 > pageChainNum ? pageChainNum : totalPage - 1;
            }else{
                startPage = (currentPage+pageNumber_3>=totalPage) ? totalPage - pageChainNum -1 : currentPage-pageNumber_2+1;
                var t = startPage + pageChainNum;
                endPage = t > totalPage ?  totalPage -1 : t;
            }
            console.log(startPage,endPage);

            for(var q= startPage ; q<= endPage ; q++ ){
                if (q === currentPage){

                    strC += '<a href="###" style="color:red;font-weight:700;" onclick="upPage('+q+')">'+(q+1)+'</a> ';
                }
                else {
                    strC += '<a href="###"  style="cursor: pointer; color: black "   onclick="upPage('+q+')">'+(q+1)+'</a> ';
                }
            }

            var strE = '<a href="###"   style=" cursor:pointer "  onclick="upPage('+(totalPage-1)+')">尾页</a>  ';//尾页
            var strE2 = currentPage + 1 + "/" + totalPage + "页" + "  共" + j + "条" ;//共*条
            document.getElementById("page").innerHTML = strS + strC + strE + strE2;

        }


        window.onload = function () {

            obj = document.getElementById("pagebox").getElementsByTagName("dd");
            j = obj.length;

            totalPage = Math.ceil(j/pageNum);
            upPage(0);
        }
<div class="fr page">
					<div class="sui-pagination pagination-large">
						<ul>
							<li class="prev  {{isTopPage()?'disabled':''}}">
								<a href="#" ng-click="queryByPage(searchMap.pageNo-1)" >«</a>
							</li>
							<li class="dotted" ng-if="firstDot==true" ><span>...</span></li>
							<li  ng-repeat="p in pageLabel" >
								<a href="#" ng-click="queryByPage(p)" >{{p}}</a>
							</li>
							<li class="dotted" ng-if="lastDot==true"><span>...</span></li>
							<li class="next {{isEndPage()?'disabled':''}} ">
								<a href="#" ng-click="queryByPage(searchMap.pageNo+1)" >»</a>
							</li>
						</ul>
						<div>
							<span>共{{resultMap.totalPages}}页&nbsp; </span>
							<span>共 {{resultMap.total}}条记录</span>
							<span>第
								<input type="text" class="page-num" ng-model="searchMap.pageNo" >页
								<button class="page-confirm" ng-click="queryByPage(searchMap.pageNo)" >确定</button>
							</span>
						</div>
					</div>
				</div>

分页条为显示为：

测试的dd标签为：

					<dd>1</dd>
                    <dd>2</dd>
                    <dd>3</dd>
                    <dd>4</dd>
                    <dd>5</dd>
                    <dd>6</dd>
                    <dd>...</dd>

最终测试效果为：

对比两种分页方式可知，纯网页代码需要用javascript在页面上直接处理，而如果采用一些前端的框架，则处理分页的方法更加规范，但其本质思想是一致的。这次学习让我感受颇多，学习知识的日子总是让人感觉那么美好，以后知识期望再接再厉，向大佬进阶之路前进。。。