Js pagination sample code for article content

  • 2020-03-30 02:12:09
  • OfStack

Thinkphp article display code:
 
<div id="showContent">{$article.content|htmlspecialchars_decode}</div> 
<div id="articlePages"></div> 

Js implementation code:
 
<script type="text/javascript"> 
var obj = document.getElementById("showContent"); 
var pages= document.getElementById("articlePages"); 
//alert(obj.scrollHeight); 
window.onload= function() 
{ 
var all=Math.ceil(parseInt(obj.scrollHeight)/ parseInt(obj.offsetHeight)); 
//Get the total number of pages, mainly by applying scrollHeight
pages.innerHTML=" A total of "+ all +" page "; 
for(var i=1; i<=all;i++) 
{ 
pages.innerHTML +=" <a href=javascript:showPage('"+i+"');> "+i+"</a> "; 
//Output all page Numbers
} 
} 
function showPage(pageIndex) 
{ 
obj.scrollTop = (pageIndex-1)* parseInt(obj.offsetHeight); 
} 
</script> 

The CSS code:
 
#showContent { 
color:black; 
font-size: 16px; 
height: 700px; 
overflow: hidden; 
} 
#articlePages { 
text-align: right; 
} 

Related articles: