Javascript tulen untuk melaksanakan paging (dua kaedah)

Kadangkala halaman memerlukan data yang terdiri daripada banyak jadual yang berbeza. Menggunakan paging pangkalan data adalah sangat mudah, jadi bagaimana untuk menggunakan js untuk melaksanakan paging? Seterusnya, editor akan membantu anda menyelesaikan masalah ini. Rakan-rakan yang memerlukannya boleh datang dan belajar bersama

Saya akan menyiarkan rendering untuk anda dahulu:

Dalam Talian Memang terdapat banyak pemalam paging dan kod sumber terbuka Saya seorang pembangun bahagian belakang, tetapi saya tidak dapat mengawal CSS bahagian hadapan dan gaya lain, jadi saya mula menulisnya sendiri. Sebenarnya, prinsip paging adalah sangat mudah, iaitu, menggunakan ajax untuk memindahkan nilai (nombor halaman semasa) ke latar belakang, dan menggunakan had di latar belakang untuk paging.

Kerana ini adalah kali pertama saya menulis penomboran menggunakan js. Tulisan yang biasa tidak diekstrak, tetapi ia masih boleh digunakan sebagai Untuk mengendalikan paging awam, saya hanya menggunakan kod

untuk menulis dua paging yang sedikit berbeza! Pengekstrakan kod awam adalah serupa. Sebab utama ialah latar belakang ajax dan nilai yang dikembalikan adalah berbeza asalkan nilai jumlah halaman diperoleh, klik pada halaman utama/halaman seterusnya, dsb. Jika nilainya. lulus adalah betul, pada dasarnya tidak akan ada masalah dengan paging

Kaedah 1 melaksanakan paging menggunakan JS tulen:

Tanpa berlengah lagi, mari kita terus ke kod. !

Nota: Projek ini ditulis sepenuhnya dalam js Data bahagian hadapan diperoleh melalui ajax, dan kemudian dipasang dan dimuatkan secara dinamik ke dalam halaman.

1. Lampirkan kod untuk halaman sebelumnya, halaman seterusnya, dsb. (nilai di dalamnya adalah semua nilai palsu, dan ia akan ditugaskan semula dalam js di bawah!)

<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. Mula-mula letakkan dua medan tersembunyi pada halaman, satu ialah nombor halaman semasa, dan satu lagi ialah jumlah nombor halaman halaman dimuatkan, dan ia boleh ditanya terus dari latar belakang Nilai yang dilampirkan, nombor halaman semasa tidak mengendalikan satu operasi, adalah perlu untuk memberikan nilai kepada nombor halaman semasa

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

3. Tulis fungsi selepas halaman dimuatkan, dan tetapkan nilai kepada jumlah nombor halaman dan nombor halaman semasa. 🎜> 4. Kaedah ekstraksi ajax, halaman ini akan menggunakan kaedah ini beberapa kali, jadi ia dikumpulkan kerana data halaman Diperolehi dari latar belakang melalui ajax, latar belakang mengembalikan koleksi Senarai

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

5. Kod melihat bahawa ini tidak banyak, ini adalah yang terakhir

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

Pelaksanaan js tulen kaedah paging dua:

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

Peringatan hangat: kod js Gambar yang ditakrifkan pada halaman sebelumnya dan halaman seterusnya boleh ditukar mengikut keperluan anda sendiri Nah, paging sudah lengkap di sini Jika anda perlu menggunakannya, anda mungkin meluangkan sedikit masa untuk memahami kod saya perlu membaca kod baris demi baris, menambah komen sendiri, dan menyelesaikannya dalam masa kurang daripada setengah jam!

Baiklah, itu sahaja buat masa ini saya telah memperkenalkan dua kaedah untuk melaksanakan paging menggunakan js tulen Untuk lebih banyak tutorial berkaitan, sila lawati

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

Tutorial Video JavaScript

!