Reines Javascript zur Implementierung von Paging (zwei Methoden)

Manchmal erfordert die Seite Daten, die aus vielen verschiedenen Tabellen bestehen. Die Verwendung von Datenbank-Paging ist sehr einfach. Wie kann man also js zum Implementieren von Paging verwenden? Als nächstes hilft Ihnen der Herausgeber bei der Lösung dieses Problems. Freunde, die es brauchen, können zusammenkommen und lernen

Ich werde zuerst die Renderings für Sie veröffentlichen:

Online Es gibt zwar viele Paging-Plug-Ins und Open-Source-Codes, aber ich kann das Front-End-CSS und andere Stile nicht kontrollieren, also habe ich angefangen, sie selbst zu schreiben. Tatsächlich ist das Paging-Prinzip sehr einfach: Verwenden Sie Ajax, um den Wert (aktuelle Seitennummer) in den Hintergrund zu übertragen, und verwenden Sie Limit im Hintergrund für Paging.

Weil dies das erste Mal ist, dass ich eine Paginierung mit js schreibe. Einige gängige Texte sind möglicherweise nicht perfekt, aber es ist immer noch in Ordnung, sie zu verwenden öffentliches Paging, ich habe gerade den Code

verwendet, um zwei leicht unterschiedliche Paging zu schreiben! Die Extraktion des öffentlichen Codes ist ähnlich. Der Hauptgrund ist, dass der Ajax-Hintergrund und der zurückgegebene Wert unterschiedlich sind. Klicken Sie auf die Startseite/nächste Seite usw., solange der Wert erhalten wird bestanden korrekt sind, wird es im Grunde kein Problem mit Paging geben. Methode 1 zur Implementierung von Paging mit reinem JS:

Kommen wir ohne weiteres direkt zum Code !

Hinweis: Dieses Projekt ist vollständig in js geschrieben. Die Front-End-Daten werden über Ajax abgerufen und dann zusammengestellt und dynamisch in die Seite geladen.

1. Hängen Sie die Codes für die vorherige Seite, die nächste Seite usw. an (die darin enthaltenen Werte sind alle gefälschte Werte und werden unten in js neu zugewiesen!)

<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. Fügen Sie zunächst zwei versteckte Felder auf der Seite ein, eines ist die aktuelle Seitenzahl und das andere ist die Gesamtseitenzahl Die Seite wird geladen und kann direkt aus dem Hintergrund abgefragt werden Angehängter Wert, die aktuelle Seitennummer führt keinen einzigen Vorgang aus, es ist notwendig, der aktuellen Seitennummer einen Wert zuzuweisen

3. Schreiben Sie nach dem Laden der Seite eine Funktion und weisen Sie der Gesamtseitenzahl und der aktuellen Seitenzahl Werte zu 🎜> 4. Extraktion der Ajax-Methode, diese Seite verwendet diese Methode mehrmals, daher werden sie erfasst, da die Daten der Seite über Ajax vom Hintergrund abgerufen werden und der Hintergrund eine Listensammlung zurückgibt

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

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

5. Der Code sieht, dass dies nicht viel ist, das ist das Letzte

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

Reine js-Implementierung der Paging-Methode zwei:

Warme Erinnerung: js-Code Die auf der vorherigen Seite und der nächsten Seite definierten Bilder können entsprechend Ihren eigenen Anforderungen geändert werden

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

Nun, das Paging ist hier abgeschlossen, Sie werden vielleicht eine Weile damit verbringen, meinen Code zu verstehen. Ich habe einfach zwei Stunden gebraucht Ich muss den Code Zeile für Zeile lesen, selbst Kommentare hinzufügen und es in weniger als einer halben Stunde erledigen!

Okay, das war's für den Moment. Ich habe zwei Methoden zum Implementieren von Paging mit reinem JS vorgestellt. Weitere verwandte Tutorials finden Sie unter JavaScript-Video-Tutorial

!