首页>>分页>>php+mysql+ajax+jquery分页(2016-08-22)

php+mysql+ajax+jquery分页

本站已经发布了比较多的分页，每个都不尽相同。

php+mysql+ajax+jquery分页
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 index.html

 

XML/HTML Code
  1. <div id="list">  
  2.             <ul></ul>  
  3.         </div>  
  4.         <br />  
  5.         <br />  
  6.         <div id="pagecount" class="pager clearfix"></div><div id="loading"></div>  

同时载入js文件

 

JavaScript Code
  1. var curPage = 1; //当前页码  
  2. var total,pageSize,totalPage;  
  3. //获取数据  
  4. function getData(page){   
  5.     $.ajax({  
  6.         type: 'POST',  
  7.         url: 'pages.php',  
  8.         data: {'pageNum':page-1},  
  9.         dataType:'json',  
  10.         beforeSend:function(){  
  11.             $("#loading").html("<img id='loadin'g src='loading.gif'>");  
  12.         },  
  13.         success:function(json){  
  14.             $("#loading").html("");  
  15.             $("#list ul").empty();  
  16.             total = json.total; //总记录数  
  17.             pageSize = json.pageSize; //每页显示条数  
  18.             curPage = page; //当前页  
  19.             totalPage = json.totalPage; //总页数  
  20.             var li = "";  
  21.             var list = json.list;  
  22.             $.each(list,function(index,array){ //遍历json数据列  
  23.                 li += "<li>"+array['id']+"."+array['title'].substring(0,10)+"</li>";  
  24.             });  
  25.             $("#list ul").append(li);  
  26.         },  
  27.         complete:function(){ //生成分页条  
  28.             getPageBar();  
  29.         },  
  30.         error:function(){  
  31.             alert("数据加载失败");  
  32.         }  
  33.     });  
  34. }  
  35.   
  36. //获取分页条  
  37. function getPageBar(){  
  38.     //页码大于最大页数  
  39.     if(curPage>totalPage) curPage=totalPage;  
  40.     //页码小于1  
  41.     if(curPage<1) curPage=1;  
  42.     pageStr = "<span class=''>共"+total+"条"+curPage+"/"+totalPage+"</span>";  
  43.       
  44.     //如果是第一页  
  45.     if(totalPage<=4)  
  46.     {  
  47.         if(curPage==1){  
  48.             pageStr += "<span class='cur'>1</span>";  
  49.             for(var i=2;i<=totalPage;i++)  
  50.             {  
  51.                 pageStr += "<a href='javascript:void(0)' rel='"+i+"'>"+i+"</a>";  
  52.             }  
  53.         }else{  
  54.             pageStr += "<a href='javascript:void(0)' rel='1'><<</a><a href='javascript:void(0)' rel='"+(curPage-1)+"'><</a>";  
  55.             for(var i=1;i<=totalPage;i++)  
  56.             {  
  57.                 if(i==curPage)  
  58.                 {  
  59.                     pageStr += "<span class='cur'>"+i+"</span>"  
  60.                 }  
  61.                 else  
  62.                 {  
  63.                     pageStr += "<a href='javascript:void(0)' rel='"+i+"'>"+i+"</a>";  
  64.                 }  
  65.             }  
  66.               
  67.         }  
  68.     }  
  69.     else//当页数大于5的时候就要这样显示1 2 3 4 ...  
  70.     {  
  71.         if(curPage<=3){  
  72.             if(curPage==1)  
  73.             {  
  74.                 pageStr += "<span class='cur'>1</span>";  
  75.             }  
  76.             else  
  77.             {  
  78.                 pageStr += "<a href='javascript:void(0)' rel='1'><<</a><a href='javascript:void(0)' rel='"+(curPage-1)+"'><</a>";  
  79.                 pageStr += "<span class='cur'><a href='javascript:void(0)' rel='1'>1</a></span>";  
  80.             }  
  81.             for(var i=2;i<=4;i++)  
  82.             {  
  83.                 if(i==curPage)  
  84.                 {  
  85.                     pageStr += "<span class='cur'>"+i+"</span>"  
  86.                 }  
  87.                 else  
  88.                 {  
  89.                     pageStr += "<a href='javascript:void(0)' rel='"+i+"'>"+i+"</a>";  
  90.                 }  
  91.             }  
  92.             pageStr += "<span class='cur'>...</span>";  
  93.         }else{  
  94.             pageStr += "<a href='javascript:void(0)' rel='1'><<</a><a href='javascript:void(0)' rel='"+(curPage-1)+"'><</a>";  
  95.             pageStr += "<span class='cur'>...</span>";  
  96.             if(curPage>totalPage-2)  
  97.             {  
  98.                 for(var i=totalPage-2;i<=totalPage;i++)  
  99.                 {  
  100.                     if(i==curPage)  
  101.                     {  
  102.                         pageStr += "<span class='cur'>"+i+"</span>"  
  103.                     }  
  104.                     else  
  105.                     {  
  106.                         pageStr += "<a href='javascript:void(0)' rel='"+i+"'>"+i+"</a>";  
  107.                     }  
  108.                 }  
  109.             }  
  110.             else  
  111.             {  
  112.                 pageStr += "<a href='javascript:void(0)' rel='"+(curPage-1)+"'>"+(curPage-1)+"</a>";  
  113.                 pageStr += "<span class='cur'>"+curPage+"</span>";  
  114.                 pageStr += "<a href='javascript:void(0)' rel='"+(parseInt(curPage)+1)+"'>"+(parseInt(curPage)+1)+"</a>";  
  115.                 pageStr += "<span class='cur'>...</span>";  
  116.             }  
  117.         }  
  118.     }  
  119.     //如果是最后页  
  120.     if(curPage>=totalPage){  
  121.         //pageStr += "<span>></span>   <span>>></span>";  
  122.     }else{  
  123.         pageStr += "<a href='javascript:void(0)' rel='"+(parseInt(curPage)+1)+"'>></a><a href='javascript:void(0)' rel='"+totalPage+"'>>></a>";  
  124.     }  
  125.           
  126.     $("#pagecount").html(pageStr);  
  127. }  
  128.   
  129. $(function(){  
  130.     getData(1);  
  131.     $("#pagecount  a").live('click',function(){  
  132.         var rel = $(this).attr("rel");  
  133.         if(rel){  
  134.             getData(rel);  
  135.         }  
  136.     });  
  137. });  

 


原文地址:http://www.freejs.net/article_fenye_579.html