페이징을 구현하는 순수 자바스크립트(두 가지 방법)

페이지에 다양한 테이블로 구성된 데이터가 필요한 경우가 있습니다. 어떻게 페이지를 매길 수 있나요? 데이터베이스 페이징을 사용하는 것은 매우 간단합니다. 그렇다면 js를 사용하여 페이징을 구현하는 방법은 무엇입니까? 다음으로, 편집자가 이 문제를 해결하는 데 도움을 줄 것입니다. 필요한 친구들이 와서 함께 배울 수 있습니다.

렌더링을 먼저 게시해 드리겠습니다.

온라인 페이징 플러그인과 오픈소스 코드는 정말 많습니다. 저는 백엔드 개발자지만 프런트엔드 CSS와 기타 스타일을 제어할 수 없어서 직접 작성하기 시작했습니다. 실제로 페이징 원리는 매우 간단합니다. 즉, ajax를 사용하여 값(현재 페이지 번호)을 백그라운드로 전송하고 페이징을 위해 백그라운드에서 제한을 사용하는 것입니다.

js를 사용하여 페이지 매김을 작성하는 것이 처음이기 때문에 작성이 완벽하지 않을 수 있습니다. 일부 일반적인 내용은 추출되지 않았지만 여전히 이 코드를 처리하는 데 사용할 수 있습니다. 공개 페이징, 저는

코드를 사용하여 약간 다른 두 페이징을 작성했습니다! 공개코드 추출이 비슷한데, 주된 이유는 ajax 배경과 반환값이 다르기 때문이다. 전체 페이지 수의 값을 구한 만큼 홈페이지/다음 페이지 등을 클릭하면 된다.

순수 JS를 사용하여 페이징을 구현하는 방법 1:

더 이상 고민하지 않고 바로 코드로 넘어가겠습니다. !

참고: 이 프로젝트는 전적으로 js로 작성되었습니다. 프런트엔드 데이터는 ajax를 통해 얻은 다음 조합되어 페이지에 동적으로 로드됩니다.

1. 이전 페이지, 다음 페이지 등의 코드를 첨부합니다. (안에 있는 값은 모두 가짜 값이며 아래 js에서 다시 할당됩니다!)

<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. 먼저 페이지에 두 개의 숨겨진 필드를 배치합니다. 하나는 현재 페이지 번호이고 다른 하나는 전체 페이지 번호입니다. 페이지가 로드되고 백그라운드에서 직접 쿼리할 수 있습니다. 첨부된 값, 현재 페이지 번호는 단일 동작을 수행하지 않으며, 현재 페이지 번호에 값을 할당해야 합니다

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

3. 페이지가 로드된 후 함수를 작성하고, 전체 페이지 수와 현재 페이지 수에 값을 할당합니다.

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

4. 추출 ajax 방법, 이 페이지는 이 방법을 여러 번 사용할 것이므로 페이지의 데이터가 ajax를 통해 백그라운드에서 얻어지고, 백그라운드는 List 컬렉션을 반환하기 때문에 수집됩니다

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

5. 코드에서는 이것이 많지 않다고 보고 이것이 마지막입니다

//抽取拼串的方法
function commonfunction(data){
 $('#projectlist').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

페이징 방법 2의 순수 js 구현:

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

알림: js 코드 이전 페이지와 다음 페이지에 정의된 그림은 필요에 따라 변경될 수 있습니다.

자, 여기까지 페이징이 완료되었습니다. 꼭 사용해야 한다면 제 코드를 이해하는 데 시간이 좀 걸릴 수도 있겠습니다. 사실 코드를 작성하는 데만 2시간이 걸렸습니다. 코드를 한 줄씩 읽고, 직접 주석을 추가하고, 완료하면 30분 이내에 완료됩니다!

자, 지금은 순수 js를 사용하여 페이징을 구현하는 두 가지 방법을 소개했습니다. 더 많은 관련 튜토리얼을 보려면 JavaScript 비디오 튜토리얼을 방문하세요.