Maison > interface Web > js tutoriel > jquery implémente la page html div, la fausse pagination a le principe et code_jquery

jquery implémente la page html div, la fausse pagination a le principe et code_jquery

WBOY
Libérer: 2016-05-16 16:36:50
original
1551 Les gens l'ont consulté

Faux principe de pagination du div : la hauteur totale du div rempli (1000px) et la hauteur d'affichage (100px) alors le nombre total de pages est de 10 pages. Lors de la visualisation de la deuxième page, la hauteur du div affiché est comprise entre 100 et 200, et ainsi de suite

Voir que la page se tourne, c'est en fait la barre de défilement du div qui bouge.

<div id="applications">显示数据集合</div>
Copier après la connexion
<style> 
#applications 
{ 
/* width:500px;调整显示区的宽*/ 
height: 1592px; /*调整显示区的高*/ 
font-size: 14px; 
margin-top:23px; 
line-height: 20px; 
overflow-pageindex: hidden; 
overflow-y: hidden; 
word-break: break-all; 
} 
</style>

Copier après la connexion
<script language="javascript"> 
var obj = document.getElementById("applications"); //获取内容层 
var pages = document.getElementById("pages"); //获取翻页层 
window.onload = function ()//重写窗体加载的事件 
{ 
var allpages = Math.ceil(parseInt(obj.scrollHeight) / parseInt(obj.offsetHeight)); //获取页面数量 
// pages.innerHTML = "<b>共" + allpages-1+ "页</b> "; //输出页面数量 
for (var i = 1; i <= allpages; i++) { 
if (i == 1) { 
pages.innerHTML += "<a href=\"javascript:showPage('" + i + "');\">首页</a> "; 
} 
else{ 
pages.innerHTML += "<a href=\"javascript:showPage('" + i + "');\">" + i + "</a> "; 
} 
//循环输出第几页 
} 
} 
function showPage(pageINdex) { 
obj.scrollTop = (pageINdex - 1) * parseInt(obj.offsetHeight); //根据高度,输出指定的页 
} 
</script>
Copier après la connexion

Lors de la pagination de données dynamiques, la dernière page n'est pas suffisante pour le nombre d'éléments de pagination et la hauteur spécifique doit être renseignée, sinon les données de la page précédente seront affichées à plusieurs reprises sur la dernière page.

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal