静态网页分页

爱被打了一巴掌 2023-06-20 14:55 119阅读 0赞

以前总是不明白静态网页为什么需要分写，但是如果是一个纯静态的html项目，如果网页内容过多，网页的可读性会变差，所以需要对网页进行分页，对网页分页需要在script标签中写入js代码，写这篇博文时，我参考了网上一位小姐姐的播客，下面奉上小姐姐播客地址：[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}}页  </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标签为：

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

[js]: https://www.cnblogs.com/websmile/p/8310014.html
[20191210180819407.png]: https://img-blog.csdnimg.cn/20191210180819407.png