TRS js分頁程式碼實現
阿新 • • 發佈：2019-01-27
css 程式碼：
/**
*
* pageStyle
*
**/
.pageStyle {
font-size:14px;
font-family:Arial, Helvetica, sans-serif;
margin:10px 0 9px;
}
.pageStyle span {
display:inline-block;
text-align:center;
width:23px;
height:19px;
line-height:19px;
text-decoration:none;
vertical-align:middle;
overflow:hidden;
background:url(fincon03.jpg) no-repeat center;
color:#fff;
font-weight:bold;
}
.pageStyle a {
display:inline-block;
text-align:center;
width:23px;
height:19px;
overflow:hidden;
line-height:19px;
text-decoration:none;
vertical-align:middle;
color:#000;
}
.pageStyle .upPage{
display:inline-block;
width:23px;
height:19px;
background:url(fincon01.jpg) no-repeat center;
}
.pageStyle .downPage{
display:inline-block;
width:23px;
height:19px;
background:url(fincon02.jpg) no-repeat center;
}
.pageStyle a:link {
color:#000;
}
.pageStyle a:visited {
color:#000;
}
.pageStyle a:hover {
color:#FFF;
text-decoration:none;
background:url(fincon03.jpg) no-repeat center top;
}js 程式碼：
// _nPageCount 總頁數（int）
// _nCurrIndex 當前頁（int）
// _sPageName 地址字首（string） （index）
// _sPageExt 地址字尾（string）(.htm)
// 參考地址：index_3.htm
function createPageHTML(_nPageCount,_nCurrIndex,_sPageName,_sPageExt){
if(_nPageCount == null || _nPageCount <= 1){return;
}
var nCurrIndex = _nCurrIndex || 0;
document.write('<div class="pageStyle">');
if(_nCurrIndex <= _nPageCount && _nCurrIndex - 1 > 0){
document.write("<a href=\""+_sPageName+"_" + (_nCurrIndex-1) + "."+_sPageExt+"\" alt=\"上一頁\"><b class=\"upPage\"></b></a> ");
}else if(_nCurrIndex-1 == 0){
document.write("<a href=\""+_sPageName+"."+_sPageExt+"\" alt=\"上一頁\"><b class=\"upPage\"></b></a> ");
}else{
document.write("<a href=\"#\" alt=\"上一頁\"><b class=\"upPage\"></b></a> ");
}
if(nCurrIndex == 0){
document.write("<span>1</span> ");
}else if((6 - _nCurrIndex) >= 2){
document.write("<a href=\""+_sPageName+"."+_sPageExt+"\">1</a> ");
}else if((6 - _nCurrIndex) > 0 && (6 - _nCurrIndex) < 2){
document.write("<a href=\""+_sPageName+"."+_sPageExt+"\">1..</a> ");
}else{}
// _nCurrIndex below six
if(_nPageCount > 6 &&(_nCurrIndex == 0 || _nCurrIndex < 6)){
if((6 - _nCurrIndex) > 2){
for(var i = 1; i < 6; i++){
if(nCurrIndex == i){
document.write("<span>"+(i+1)+"</span> ");
}else{
document.write("<a href=\""+_sPageName+"_"+ i +"."+_sPageExt+"\">"+(i+1)+"</a> ");
}
}
}else if((6 - _nCurrIndex) <= 2){
for(var i = _nCurrIndex - 2; i < (6 + 2); i++){
if(nCurrIndex == i - 1){
document.write("<span>"+ i +"</span> ");
}else{
document.write("<a href=\""+_sPageName+"_"+(i - 1) +"."+_sPageExt+"\">"+ i +"</a> ");
}
}
}else{}
document.write("<a href=\""+_sPageName+"_"+(_nPageCount - 1)+"."+_sPageExt+"\">.."+ _nPageCount +"</a> ");
}
// _nCurrIndex above six and below three
if(_nPageCount > 6 && _nCurrIndex <= _nPageCount && _nCurrIndex >= 6){
document.write("<a href=\""+_sPageName+"."+_sPageExt+"\">1..</a> ");
if(_nPageCount - _nCurrIndex > 3){
for(var i = -1; i <= 3; i++){
if(nCurrIndex == _nCurrIndex + i - 1){
document.write("<span>"+(_nCurrIndex + i)+"</span> ");
}else{
document.write("<a href=\""+_sPageName+"_"+(_nCurrIndex + i - 1)+"."+_sPageExt+"\">"+(_nCurrIndex + i)+"</a> ");
}
}
document.write("<a href=\""+_sPageName+"_"+( _nPageCount - 1 )+"."+_sPageExt+"\">.."+ _nPageCount +"</a> ");
}else if(_nPageCount - _nCurrIndex <= 3 && _nPageCount - _nCurrIndex > 0){
for(var j = _nCurrIndex - 2; j <= _nPageCount; j++){
if(nCurrIndex == j - 1){
document.write("<span>"+ j +"</span> ");
}else{
document.write("<a href=\""+_sPageName+"_"+(j- 1)+"."+_sPageExt+"\">"+ j +"</a> ");
}
}
}else{}
}
if(_nCurrIndex >=0 && _nCurrIndex < _nPageCount - 1){
document.write("<a href=\""+_sPageName+"_" + (_nCurrIndex + 1) + "."+_sPageExt+"\" alt=\"下一頁\"><b class=\"downPage\"></b></a>");
}else{
document.write("<a href=\"#\" alt=\"下一頁\"><b class=\"downPage\"></b></a>");
}
document.write('</div>');
}
呼叫方式：
<script>createPageHTML(${PAGE_COUNT},${PAGE_INDEX},"${PAGE_NAME}","${PAGE_EXT}")</script>
效果圖：
