recherche

Maison  >  Article  >  interface Web  >  js implémente la pagination ajax (image détaillée et explication textuelle)

js implémente la pagination ajax (image détaillée et explication textuelle)

php中世界最好的语言
php中世界最好的语言original
2018-04-04 16:29:291323parcourir

Cette fois, je vais vous apporter js pour implémenter la pagination ajax (explication détaillée en image et en texte). Quelles sont les précautions pour que js implémente la pagination ajax Ce qui suit est un cas pratique, jetons un coup d'œil. .

L'exemple de cet article décrit comment implémenter la pagination ajax dans js. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants : 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Untitled Document</title>
</head>
<body>
<style type="text/css">
*{margin:0;padding:0}
.ajax_page{padding:1px 4px;border:1px solid #e60011;margin:0 2px;text-decoration:none;color:#666666;font-family:mingliu;font-size:11px;height:14px;line-height:14px;float:left;font-weight:bold;display:block;}
span.currentPage{padding:2px 4px;color:#666666;font-size:11px;height:14px;line-height:14px;float:left;display:block;font-weight:bold;font-family:mingliu}
</style>
<style type="text/css">
*{margin:0;padding:0}
.ajax_page{padding:1px 4px;border:1px solid #e60011;margin:0 2px;text-decoration:none;color:#666666;font-family:mingliu;font-size:11px;height:14px;line-height:14px;float:left;font-weight:bold;display:block;}
span.currentPage{padding:2px 4px;color:#666666;font-size:11px;height:14px;line-height:14px;float:left;display:block;font-weight:bold;font-family:mingliu}
</style>
<p id="demo" style="width:500px;margin:10px auto;"></p>
<script type="text/JavaScript">
<!--
function initPage(totalPages,curPage,middlePage,Container){
  var htmlstr = &#39;&#39;;
  if(curPage > totalPages) {curPage = totalPages}
  if(curPage < 0) {curPage = 1}
  var curBigPage = Math.ceil(curPage/middlePage)
  //当前所在的屏数,如curPage=21,总页数为50页时,屏数就是3（当前是第几屏）实际上是这种形式：Math.ceil(curPage*pageSize/pageSize*perPage)
  var totalBigPage = Math.ceil(totalPages/middlePage); //总的屏数
  if( totalPages < middlePage){
    for(var i=1;i<totalPages+1;i++){
      if(i == curPage){
        htmlstr += &#39;<span class="currentPage">' + i + '</span>';
      }else{
        htmlstr += '<a href="javascript:void(0)" mce_href="javascript:void(0)" onclick="initPage(&#39;+ totalPages+&#39;,&#39;+i+&#39;,&#39;+middlePage +&#39;,/&#39;&#39;+ container+&#39;/&#39;);getPageData(&#39;+ i+&#39;);return false" class="ajax_page">'+i +'</a>';
      }
    }
  }else{
    var curBigStart = (curBigPage-1)*middlePage + 1;
    if(curBigPage == totalBigPage){
      var curBigEnd = totalPages;
    }else{
      var curBigEnd = curBigPage * middlePage;
    }
    if(curBigPage != 1){  //前一屏
      var preCurPage = curBigStart - middlePage;
      htmlstr += '<a href="javascript:void(0)" mce_href="javascript:void(0)" onclick="initPage(&#39;+ totalPages+&#39;,&#39;+preCurPage+&#39;,&#39;+middlePage +&#39;,/&#39;&#39;+ container+&#39;/&#39;);getPageData(&#39;+ preCurPage +&#39;);return false" class="ajax_page">pre</a>';
    }
    for(var i=curBigStart;i<=curBigEnd;i++){
      if(i == curPage){
        htmlstr += &#39;<span class="currentPage">' + i + '</span>';
      }else{
        htmlstr += '<a href="javascript:void(0)" mce_href="javascript:void(0)" onclick="initPage(&#39;+ totalPages+&#39;,&#39;+i+&#39;,&#39;+middlePage +&#39;,/&#39;&#39;+ container+&#39;/&#39;);getPageData(&#39;+ i +&#39;);return false" class="ajax_page">' + i + '</a>';
      }
    }
    if(curBigPage != totalBigPage){  //后一屏
      var nextCurPage = curBigStart + middlePage;
      htmlstr += '<a href="javascript:void(0)" mce_href="javascript:void(0)" onclick="initPage(&#39;+ totalPages+&#39;,&#39;+nextCurPage+&#39;,&#39;+middlePage +&#39;,/&#39;&#39;+ container+&#39;/&#39;);getPageData(&#39;+ nextCurPage + &#39;);return false" class="ajax_page">next</a>';
    }
  }
  document.getElementById('demo').innerHTML = htmlstr
}
function getPageData(i){
  alert('现在取第 '+i+ ' 页数据');  //ajax get data
}
initPage(50,2,10,'demo');
// --></script>
</body>
</html>

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes. sur le site PHP chinois !

Lecture recommandée :

Comment lire des données Json avec ajax

Comment construire AJAX pour implémenter la conversion de formulaire JSON

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

php json ajax JS
Déclaration：
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
Article précédent：Nom d'utilisateur de vérification Ajax (explication graphique et textuelle détaillée)Article suivant：Nom d'utilisateur de vérification Ajax (explication graphique et textuelle détaillée)

Articles Liés

Voir plus