简体中文（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  >  js implements ajax paging (detailed picture and text explanation)

js implements ajax paging (detailed picture and text explanation)

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

This time I will bring you js to implement ajax paging (detailed pictures and texts). What are the precautions for js to implement ajax paging. The following is a practical case, let's take a look.

The example of this article describes the method of implementing ajax paging in js. Share it with everyone for your reference, the details are as follows: 

<!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>
I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Methods for ajax to read Json data

Methods to construct AJAX to implement form JSON conversion

The above is the detailed content of js implements ajax paging (detailed picture and text explanation). For more information, please follow other related articles on the PHP Chinese website!

php json ajax JS
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：Ajax verification username (detailed graphic and text explanation)Next article：Ajax verification username (detailed graphic and text explanation)

Related articles

See more