Jquery HTML page div false pagination principle has code

  • 2020-03-30 03:53:37
  • OfStack

Div false pagination principle: the total height of the div after filling (1000px) displays the height (100px) and the total number of pages is 10. When you look at the second page, the div is between 100 and 200, and so on

When you see the page turning, you actually move the div scroll bar.


<div id="applications"> Display data set </div>

<style> 
#applications 
{ 
 
height: 1592px;  
font-size: 14px; 
margin-top:23px; 
line-height: 20px; 
overflow-pageindex: hidden; 
overflow-y: hidden; 
word-break: break-all; 
} 
</style>


<script language="javascript"> 
var obj = document.getElementById("applications"); //Capture content layer
var pages = document.getElementById("pages"); //Gets the page turning layer
window.onload = function ()//Overrides the event that the form loads
{ 
var allpages = Math.ceil(parseInt(obj.scrollHeight) / parseInt(obj.offsetHeight)); //Get the number of pages
// pages.innerHTML = "<b> A total of " + allpages-1+ " page </b> "; // Number of output pages  
for (var i = 1; i <= allpages; i++) { 
if (i == 1) { 
pages.innerHTML += "<a href="javascript:showPage('" + i + "');"> Home page </a> "; 
} 
else{ 
pages.innerHTML += "<a href="javascript:showPage('" + i + "');">" + i + "</a> "; 
} 
//The output page of the loop
} 
} 
function showPage(pageINdex) { 
obj.scrollTop = (pageINdex - 1) * parseInt(obj.offsetHeight); //Outputs the specified page based on height
} 
</script>

When dynamic data is paged, the tail page is not enough paged bars, so the specific height needs to be filled, otherwise the page page will repeatedly display the data of the previous page in the last page.


Related articles: