以前总是不明白静态网页为什么需要分写,但是如果是一个纯静态的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}}页 </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在页面上直接处理,而如果采用一些前端的框架,则处理分页的方法更加规范,但其本质思想是一致的。这次学习让我感受颇多,学习知识的日子总是让人感觉那么美好,以后知识期望再接再厉,向大佬进阶之路前进。。。