自己写出个ajax的分页插件

简介: 自己写出个ajax的分页插件

思路:

1 先计算出分页页码 。返回分页页码数组。也就是 如

image.png

2.然后循环变量页码数组 拼接成html元素 并 绑定上事件

代码:

/*初始化分页 container容器传jquery对象 pageNow当前第几页   pageSize每页数量   count总数*/
  function initPage(container,pageNow,pageSize,count){
    container.empty();
    var totalPage=0;
    if(count%pageSize>0){
      totalPage=parseInt((count/pageSize)+1);
    }else{
      totalPage=parseInt(count/pageSize);
    }
    var pageSpanArray=makePageNos(pageNow,pageSize,count,totalPage);
    $.each(pageSpanArray,function(index,currData){
        if(currData == pageNow){
          pageSpan=$("<strong></strong>");
          pageSpan.text(pageNow);
          container.append(pageSpan);
          return;
        }
        if(currData=="..."){
          pageSpan=$("<span></span>");
          pageSpan.text(currData);
          container.append(pageSpan);
          return;
        }
        pageSpan=$("<a></a>");
        pageSpan.text(currData);
        pageSpan.on("click",function(e){
          e.preventDefault();
          goPage(currData);
        });
        container.append(pageSpan);
    }); 
    if(pageNow==1){
      initFanye(pageNow,container,"pre",false);
      initFanye(pageNow,container,"next",true);
    }
    else if(pageNow==totalPage){
      initFanye(pageNow,container,"pre",true);
      initFanye(pageNow,container,"next",false);
    }
    else if (pageNow>1||pageNow<totalPage){
      initFanye(pageNow,container,"pre",true);
      initFanye(pageNow,container,"next",true);
    }
  }
  function initFanye(pageNow,container,type,disable){
    var html="";
    if(type =="pre"&&disable){
      html="<a>上一页</a>";
    }else if(type =="next"&&disable){
      html="<a>下一页</a>";
    }else if(type =="pre"&&!disable){
      html="<span>上一页</span>";
    }else if(type =="next"&&!disable){
      html="<span>下一页</span>";
    }
    pageSpan=$(html);
    if(disable){
      pageSpan.on("click",function(e){
        e.preventDefault();
        var goPageNo=1;
        if(type =="pre"){
          goPageNo=pageNow-1;
        }else if(type =="next"){
          goPageNo=pageNow+1;
        }
        goPage(goPageNo);
      });
    }
    container.append(pageSpan);
  }
  /*计算分页页码 pageNow当前第几页   pageSize每页数量   count总数 totalPage总页数    最后返回分页 页面*/
  function makePageNos(pageNow,pageSize,count,totalPage){
    var pageSpanLength=0;
    if(totalPage>6){
      if(pageNow<=3||pageNow>=totalPage-2){
        pageSpanLength=7;
      }else if(pageNow == 4||pageNow == totalPage-3){
        pageSpanLength=8;
      }else{
        pageSpanLength=9;
      }
    }else{
      pageSpanLength=totalPage;
    }
    var pageSpanArray=new Array(pageSpanLength)
    if(totalPage<7){
      for( i=0;i<pageSpanLength;i++){
        pageSpanArray[i]=i+1;
      }
      return pageSpanArray;
    }
  //  container.empty();
    for( i=0;i<pageSpanLength;i++){
      if(i==0){
        pageSpanArray[i]="1"
        continue;
      }
      if(i==pageSpanLength-1){
        pageSpanArray[i]=totalPage;
        continue;
      }
      if((pageSpanLength==9)&&(i==pageSpanLength-2||i==1)){
        pageSpanArray[i]="...";
        continue;
      }
      if((pageNow<=4&&i==pageSpanLength-2)||(pageNow>=totalPage-3&&i==1)){
        pageSpanArray[i]="...";
        continue;
      }
      if(pageNow<=4){
        pageSpanArray[i]=(i+1);
        continue;
      }
      if(pageNow>=totalPage-3){
        pageSpanArray[i]=(totalPage-pageSpanLength+i+1);
        continue;
      }
      if(i<parseInt(pageSpanLength/2))
        pageSpanArray[i]=(pageNow-(parseInt(pageSpanLength/2)-i));
      else
        pageSpanArray[i]=(pageNow+(i-parseInt(pageSpanLength/2)));
      }
      return pageSpanArray;
  }
相关文章
|
前端开发
JavaWeb15(AJAX+JSON实现无刷新分页)
JavaWeb15(AJAX+JSON实现无刷新分页)
|
前端开发
Echarts实战案例代码(21):front-endPage的CJJTable前端分页插件ajax分页异步加载数据的解决方案
Echarts实战案例代码(21):front-endPage的CJJTable前端分页插件ajax分页异步加载数据的解决方案
91 0
|
前端开发 JavaScript Java
Jquery+Ajax+Bootstrap Paginator实现分页的拼接
Jquery+Ajax+Bootstrap Paginator实现分页的拼接
54 0
|
前端开发 Java
教你实现SSM和Ajax后端分页
教你实现SSM和Ajax后端分页
|
前端开发
【(不用Ajax)解决 Layui 插件分页点下一页后又自动跳回前一页的问题】
【(不用Ajax)解决 Layui 插件分页点下一页后又自动跳回前一页的问题】
169 0
|
前端开发
tp5.1结合ajax和layui实现分页根据年区分数据
tp5.1结合ajax和layui实现分页根据年区分数据
82 0
N..
|
6月前
|
XML JSON 前端开发
jQuery实现Ajax
jQuery实现Ajax
N..
68 1
|
6月前
|
XML 前端开发 JavaScript
jQuery中ajax如何使用
jQuery中ajax如何使用
69 0
|
6月前
|
JSON 前端开发 Java
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
150 0
|
5月前
|
前端开发 JavaScript
杨校老师课堂之基于Servlet整合JQuery中的Ajax进行表单提交[基于IDEA]
杨校老师课堂之基于Servlet整合JQuery中的Ajax进行表单提交[基于IDEA]
46 0
杨校老师课堂之基于Servlet整合JQuery中的Ajax进行表单提交[基于IDEA]