Javascript pur pour implémenter la pagination (deux méthodes)-js tutoriel-php.cn

Javascript pur pour implémenter la pagination (deux méthodes)

PHPz

Libérer： 2018-09-29 09:59:51

original

3290 Les gens l'ont consulté

Parfois la page nécessite des données composées de nombreux tableaux différents. Comment la paginer ? L'utilisation de la pagination de base de données est très simple, alors comment utiliser js pour implémenter la pagination ? Ensuite, l'éditeur vous aidera à résoudre ce problème. Les amis qui en ont besoin peuvent venir apprendre ensemble

Je publierai d'abord les rendus pour vous :

Javascript pur pour implémenter la pagination (deux méthodes)

En ligne Il existe en effet de nombreux plug-ins de pagination et codes open source. Je suis un développeur backend, mais je ne peux pas contrôler le CSS front-end et d'autres styles, j'ai donc commencé à les écrire moi-même. En fait, le principe de la pagination est très simple, c'est-à-dire utiliser ajax pour transférer la valeur (numéro de page actuel) en arrière-plan, et utiliser la limite en arrière-plan pour la pagination.

Parce que c'est la première fois que j'écris une pagination en utilisant js. L'écriture n'est peut-être pas parfaite. Certaines paginations courantes ne sont pas extraites, mais il est toujours possible d'utiliser ce morceau de code pour le gérer. pagination publique, j'ai juste utilisé le code

pour écrire deux paginations légèrement différentes ! L'extraction du code public est similaire. La raison principale est que l'arrière-plan ajax et la valeur renvoyée sont différents. Tant que la valeur du numéro de page total est obtenue, cliquez sur la page d'accueil/page suivante, etc. passés sont corrects, il n'y aura fondamentalement aucun problème avec la pagination

Méthode 1 d'implémentation de la pagination en utilisant du JS pur :

Sans plus tarder, passons directement au code. !

Remarque : ce projet est entièrement écrit en js. Les données frontales sont obtenues via ajax, puis assemblées et chargées dynamiquement dans la page.

1. Joignez les codes de la page précédente, de la page suivante, etc. (les valeurs à l'intérieur sont toutes de fausses valeurs, et elles seront réaffectées en js ci-dessous !)

<ul class="page" id="page">
  <li id="shouye" class="p-prev disabled">
   <a href=&#39;javascript:indexpage(1);&#39;>首 页</a>
  </li>
  <li id="shangyiye" class="p-prev disabled" >
   <a href=&#39;javascript:indexpage(-1);&#39;><i></i>上一页</a>
  </li>
  <li ><a id="one" href="javascript:void(0);" >1</a></li>
  <li><a id="two" href="javascript:void(0);" >2</a></li>
  <li><a id="three" href="javascript:void(0);" >3</a></li>
  <li class="more"><a id="five" href="javascript:void(0);" >...</a></li>
  <li><a id="fore" href="javascript:void(0);" >13855</a></li>
  <li class=&#39;p-next&#39;>
   <a href=&#39;javascript:indexpage(-3);&#39; onclick="jumpToPage(&#39;2&#39;,&#39;/goods/ajaxqueryGoodsList.do.html&#39;,&#39;&#39;,&#39;goodsListContainer&#39;,&#39;13855&#39;, listPageCallback);">下一页<i></i></a>
  </li>
  <li id="weiye" class=&#39;p-next&#39;>
   <a href=&#39;javascript:void(0);&#39; onclick="indexpage(0);">尾 页</a>
  </li>
  <li class="total">
      <span id="span_number">共13855页 到第<input type="text" id="input_number" class="page-txtbox" />页
       <input name="" value="确定" type="button" onclick="jumpToPage(jQuery(&#39;#input_number&#39;).val(),&#39;/goods/ajaxqueryGoodsList.do.html&#39;,&#39;&#39;,&#39;goodsListContainer&#39;,&#39;13855&#39;, listPageCallback);" class="page-btn"/>
      </span>
  </li>
 </ul>

Copier après la connexion

2. Mettez d'abord deux champs masqués sur la page, l'un est le numéro de page actuel et l'autre est le numéro de page total. Le numéro de page total est après le. la page est chargée, et elle peut être directement interrogée depuis l'arrière-plan Valeur attachée, le numéro de page actuel n'opère pas une seule opération, il est nécessaire d'attribuer une valeur au numéro de page actuel

<input id="jiazai" type="hidden" ></input><!-- 当前页码 -->
 <input id="totalpage" type="hidden" ></input><!-- 总页码 -->

Copier après la connexion

3. Écrivez une fonction une fois la page chargée et attribuez des valeurs au numéro de page total et au numéro de page actuel

$(function(){
  $(&#39;#jiazai&#39;).val(1);//给当前页码进行赋值，默认为第一页
  ajaxfunction(page,arg,chipssort,&#39;&#39;);//这个方法是抽取的ajax后台访问的方法
});

Copier après la connexion

<. 🎜> 4. Méthode d'extraction ajax, cette page utilisera cette méthode plusieurs fois, elle est donc collectée car les données de la page sont obtenues depuis l'arrière-plan via ajax, l'arrière-plan renvoie une collection List

//抽取ajax的方法
function ajaxfunction(page,arg,chipssort,fontval){
 $.ajax({
  type:&#39;POST&#39;,
  url:&#39;/admin/receptionchips/showlist&#39;,//请求的url地址
  data:{
   page:page,
   sort:arg,
   chipssort:chipssort,
   fontval:fontval
  },
  dataType:&#39;json&#39;,
  contentType:&#39;application/x-www-form-urlencoded; charset=utf-8&#39;,
  success:function(data){
   //返回值在进行访问抽取的方法，从后台返回
   commonfunction(data);
  }
 });
}

Copier après la connexion

5. Le code voit que ce n'est pas beaucoup, c'est le dernier

//抽取拼串的方法
function commonfunction(data){
 $(&#39;#projectlist&#39;).find("li").remove();
  for (var i=0;i<data.length;i++ )
  { 
  /*****因为此页面是动态加载的，这里主要就是进行拼串，代码也不少，就不漏出来占空间了*****/
　　　　　　　　　　
  }
　　　　　　//开始是分页的核心了
  if(data.length>0){
   //设置页码
   var pading = data[0].padingnum;//总页码
   $(&#39;#totalpage&#39;).val(pading);
   var page = $(&#39;#jiazai&#39;).val();//当前页
    $(&#39;#countpage&#39;).html("/"+pading+"");
    $(&#39;#span_number&#39;).html("共"+pading+"页 到第页")
  }else{
   $(&#39;#countpage&#39;).html("/"+0+"");
  }
  //设置分页的底部 就是 首页 1 2 3 4 5 6 尾页
  var pading = data[0].padingnum;//总页码href="javascript:void(0);"
  var nowpage = $(&#39;#jiazai&#39;).val();//当前页
  //one two three five fore
　　　　　　//下面代码看着是比较麻烦，但是也不难理解 全是一样的代码，只不过是加了些判断
  if(nowpage

Copier après la connexion

Implémentation pure js de la deuxième méthode de pagination :

function goPage(pno,psize){ 
 var itable = document.getElementById("idData"); 
 var num = itable.rows.length;//表格行数 
 var totalPage = 0;//总页数 
 var pageSize = psize;//每页显示行数 
 if((num-1)/pageSize > parseInt((num-1)/pageSize)){  
  totalPage=parseInt((num-1)/pageSize)+1;  
  }else{  
  totalPage=parseInt((num-1)/pageSize);  
  }  
 var currentPage = pno;//当前页数 
 var startRow = (currentPage - 1) * pageSize+1;//开始显示的行  
  var endRow = currentPage * pageSize+1;//结束显示的行  
  endRow = (endRow > num)? num : endRow; 
 //前三行始终显示 
 for(i=0;i<1;i++){ 
 var irow = itable.rows[i]; 
 irow.style.display = "block"; 
 } 
 for(var i=1;i=startRow&&i1){ 
  tempStr += " " 
  }else{ 
  tempStr += " "; 
  } 
  for (var i = 1; i <= totalPage; i++) { 
   if (i == currentPage) { 
     tempStr += i+" "; 
   } else { 
     tempStr += ""+i+" " 
   } 
  } 
  if(currentPage<totalPage){ 
  tempStr += " "; 
  }else{ 
  tempStr += " "; 
  } 
  tempStr +=""; 
  document.getElementById("barcon").innerHTML = tempStr; 
  } 
 var base=&#39;&#39;; 
 window.onload = function(){ 
  goPage(1,10); 
 }

Copier après la connexion

Rappel chaleureux : code js Les images définies sur la page précédente et la page suivante peuvent être modifiées en fonction de vos propres besoins

Eh bien, la pagination est complète ici. Si vous avez besoin de l'utiliser, vous risquez de prendre un certain temps pour comprendre mon code. En fait, il m'a fallu deux heures pour l'écrire. Je dois lire le code ligne par ligne, ajouter des commentaires par moi-même et le faire en moins d'une demi-heure !

D'accord, c'est tout pour l'instant. J'ai présenté deux méthodes pour implémenter la pagination à l'aide de pure js. Pour plus de didacticiels connexes, veuillez visiter le

Tutoriel vidéo JavaScript !