简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

Home  >  Article  >  Web Front-end  >  Pure javascript to implement paging (two methods)

Pure javascript to implement paging (two methods)

PHPz
PHPzOriginal
2016-05-16 15:42:293203browse

Sometimes the page requires data composed of many different tables. How to paginate it? Using database paging is very simple, so how to use js to implement paging? Next, the editor will help you solve this problem. Friends who need it can come and learn together

I will post the renderings for you first:

Pure javascript to implement paging (two methods) Pure javascript to implement paging (two methods)

Online There are indeed many paging plug-ins and open source codes. I am a backend developer, but I can't control the front-end CSS and other styles, so I started to write them myself. In fact, the paging principle is very simple, that is, using ajax to transfer the value (current page number) to the background, and using limit in the background for paging.

Because this is my first time to write pagination using js. The writing may not be perfect. Some common ones are not extracted, but it is still ok to use. This piece of code can be used as To handle public paging, I just used the code

to write two slightly different paging! The public code extraction is similar. The main reason is that the ajax background and the returned value are different. As long as the value of the total page number is obtained, click on the homepage/next page, etc. If the values ​​passed are correct, there will basically be no problem with paging.

Method 1 of implementing paging using pure JS:

Without further ado, let’s get straight to the code!

Note: This project is written entirely in js. The front-end data is obtained through ajax, and then assembled and dynamically loaded into the page.

1. Attach the codes for the previous page, next page, etc. (the values ​​inside are all fake values, and they will be reassigned in js below!) 

<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>

2. First put two hidden fields on the page, one is the current page number, and the other is the total page number. The total page number is after the page is loaded, and it can be directly queried from the background Attached value, the current page number does not operate a single operation, it is necessary to assign a value to the current page number 

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

3. Write a function after the page is loaded, and assign values ​​to the total page number and the current page number. 

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

4. Extraction ajax method, this page will use this method several times, so it is collected because the data of the page is Obtained from the background through ajax, the background returns a List collection 

//抽取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);
  }
 });
}

5. The code sees that this is not a lot, this is the last one

//抽取拼串的方法
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

Pure js implementation of paging method two: 

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); 
 }

Warm reminder: js code The pictures defined on the previous page and next page can be changed according to your own needs

Well, the paging is complete here. If you need to use it, you may spend a while to understand my code. In fact, The code is not difficult. It took me two hours to write it. I just need to read the code line by line, add comments by myself, and get it done. It will be done in less than half an hour!

Okay, that’s it for now. I have introduced two methods to implement paging using pure js. For more related tutorials, please visit JavaScript Video Tutorial!

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：js mouse click image switching effect code sharing_javascript skillsNext article：js mouse click image switching effect code sharing_javascript skills

Related articles

See more