suchen

Heim  >  Artikel  >  Web-Frontend  >  js implementiert Ajax-Paging (ausführliche Bild- und Texterklärung)

js implementiert Ajax-Paging (ausführliche Bild- und Texterklärung)

php中世界最好的语言
php中世界最好的语言Original
2018-04-04 16:29:291327Durchsuche

Dieses Mal werde ich Ihnen js zur Implementierung von Ajax-Paging vorstellen (ausführliche Bild- und Texterklärung). Was sind die Vorsichtsmaßnahmen für js zur Implementierung von Ajax-Paging? .

Das Beispiel in diesem Artikel beschreibt, wie man Ajax-Paging in js implementiert. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Untitled Document</title>
</head>
<body>
<style type="text/css">
*{margin:0;padding:0}
.ajax_page{padding:1px 4px;border:1px solid #e60011;margin:0 2px;text-decoration:none;color:#666666;font-family:mingliu;font-size:11px;height:14px;line-height:14px;float:left;font-weight:bold;display:block;}
span.currentPage{padding:2px 4px;color:#666666;font-size:11px;height:14px;line-height:14px;float:left;display:block;font-weight:bold;font-family:mingliu}
</style>
<style type="text/css">
*{margin:0;padding:0}
.ajax_page{padding:1px 4px;border:1px solid #e60011;margin:0 2px;text-decoration:none;color:#666666;font-family:mingliu;font-size:11px;height:14px;line-height:14px;float:left;font-weight:bold;display:block;}
span.currentPage{padding:2px 4px;color:#666666;font-size:11px;height:14px;line-height:14px;float:left;display:block;font-weight:bold;font-family:mingliu}
</style>
<p id="demo" style="width:500px;margin:10px auto;"></p>
<script type="text/JavaScript">
<!--
function initPage(totalPages,curPage,middlePage,Container){
  var htmlstr = &#39;&#39;;
  if(curPage > totalPages) {curPage = totalPages}
  if(curPage < 0) {curPage = 1}
  var curBigPage = Math.ceil(curPage/middlePage)
  //当前所在的屏数,如curPage=21,总页数为50页时,屏数就是3（当前是第几屏）实际上是这种形式：Math.ceil(curPage*pageSize/pageSize*perPage)
  var totalBigPage = Math.ceil(totalPages/middlePage); //总的屏数
  if( totalPages < middlePage){
    for(var i=1;i<totalPages+1;i++){
      if(i == curPage){
        htmlstr += &#39;<span class="currentPage">' + i + '</span>';
      }else{
        htmlstr += '<a href="javascript:void(0)" mce_href="javascript:void(0)" onclick="initPage(&#39;+ totalPages+&#39;,&#39;+i+&#39;,&#39;+middlePage +&#39;,/&#39;&#39;+ container+&#39;/&#39;);getPageData(&#39;+ i+&#39;);return false" class="ajax_page">'+i +'</a>';
      }
    }
  }else{
    var curBigStart = (curBigPage-1)*middlePage + 1;
    if(curBigPage == totalBigPage){
      var curBigEnd = totalPages;
    }else{
      var curBigEnd = curBigPage * middlePage;
    }
    if(curBigPage != 1){  //前一屏
      var preCurPage = curBigStart - middlePage;
      htmlstr += '<a href="javascript:void(0)" mce_href="javascript:void(0)" onclick="initPage(&#39;+ totalPages+&#39;,&#39;+preCurPage+&#39;,&#39;+middlePage +&#39;,/&#39;&#39;+ container+&#39;/&#39;);getPageData(&#39;+ preCurPage +&#39;);return false" class="ajax_page">pre</a>';
    }
    for(var i=curBigStart;i<=curBigEnd;i++){
      if(i == curPage){
        htmlstr += &#39;<span class="currentPage">' + i + '</span>';
      }else{
        htmlstr += '<a href="javascript:void(0)" mce_href="javascript:void(0)" onclick="initPage(&#39;+ totalPages+&#39;,&#39;+i+&#39;,&#39;+middlePage +&#39;,/&#39;&#39;+ container+&#39;/&#39;);getPageData(&#39;+ i +&#39;);return false" class="ajax_page">' + i + '</a>';
      }
    }
    if(curBigPage != totalBigPage){  //后一屏
      var nextCurPage = curBigStart + middlePage;
      htmlstr += '<a href="javascript:void(0)" mce_href="javascript:void(0)" onclick="initPage(&#39;+ totalPages+&#39;,&#39;+nextCurPage+&#39;,&#39;+middlePage +&#39;,/&#39;&#39;+ container+&#39;/&#39;);getPageData(&#39;+ nextCurPage + &#39;);return false" class="ajax_page">next</a>';
    }
  }
  document.getElementById('demo').innerHTML = htmlstr
}
function getPageData(i){
  alert('现在取第 '+i+ ' 页数据');  //ajax get data
}
initPage(50,2,10,'demo');
// --></script>
</body>
</html>

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Ajax-Methode zum Lesen von JSON-Daten

Konstruieren von AJAX zur Implementierung der Formular-JSON-Konvertierungsmethode

Das obige ist der detaillierte Inhalt vonjs implementiert Ajax-Paging (ausführliche Bild- und Texterklärung). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

php json ajax JS
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Benutzername für die Ajax-Verifizierung (detaillierte Grafik- und Texterklärung)Nächster Artikel：Benutzername für die Ajax-Verifizierung (detaillierte Grafik- und Texterklärung)

In Verbindung stehende Artikel

Mehr sehen