分页


<!--分页html部分-->

<div id="pageBox" style="float: right;">
     <span style="padding-right:10px; cursor:auto;"共'+data.datajson.length+'条</span>
     <span style="padding-right: 10px; cursor: auto;">每页10  </span>
     <span id="prev">上一页</span>
     <ul id="pageNav"></ul>
     <span id="next">下一页</span>
 </div>
 
// 分页js部分
window.onload = function(){
  tabPage({
    deal_content : 'deal_content',
    pageNav : 'pageNav',
    pagePrev: 'prev',
    pageNext: 'next',
    curNum: 10,                //每页显示的条数
    activeClass: 'active',   //高光显示的class
    ini: 0                     //初始化显示的页面
  });

  function tabPage(tabPage){
    var deal_content = document.getElementById(tabPage.deal_content);   //获取内容列表
    var pageNav = document.getElementById(tabPage.pageNav);     //获取分页
    var pagePrev = document.getElementById(tabPage.pagePrev);   //上一页
    var pageNext = document.getElementById(tabPage.pageNext);   //下一页

    var curNum = tabPage.curNum;
    //每页显示数
    // var len = Math.ceil(deal_content.children.length / curNum);           //计算总页数
    var len = Math.ceil($("#deal_content > .itemdiv").length / curNum); //计算总页数
    var pageList = '';                                                      //生成页码
    var iNum = 0;                                                           //当前的索引值index
    for(var i = 0; i < len; i++){
      pageList+='<a href="javascript:;">'+ ( i + 1)+'</a>';
    }
    pageNav.innerHTML = pageList;

    pageNav.children[0].className = tabPage.activeClass;        //头一页加高亮显示

    for(var i = 0; i < pageNav.children.length; i++){
      pageNav.children[i].index = i;
      pageNav.children[i].onclick = function(){
        for(var t = 0; t < pageNav.children.length; t++){
          pageNav.children[t].className = '';
        }
        this.className = tabPage.activeClass;
        iNum = this.index;
        ini(iNum);
      };
    }

    //下一页
    pageNext.onclick = function(){
      if(iNum == len - 1){
        // alert('已经是最后一页');
        return false;
      }else{
        for(var t = 0; t < pageNav.children.length; t++){
          pageNav.children[t].className = '';
        }
        iNum++;
        pageNav.children[iNum].className = tabPage.activeClass;
        ini(iNum);
      }
    };

    //上一页
    pagePrev.onclick = function(){
      if(iNum == 0){
        // alert('当前是第一页');
        return false;
      }else{
        for(var t = 0; t < pageNav.children.length; t++){
          pageNav.children[t].className = '';
        }
        iNum--;
        pageNav.children[iNum].className = tabPage.activeClass;
        ini(iNum);
      }
    };

    function ini(iNum){
      for(var i = 0; i < deal_content.children.length; i++){
        deal_content.children[i].style.display = 'none';
      }

      for(var i = 0; i < curNum; i++){
        if(deal_content.children[(iNum * curNum + i)] == undefined){ continue; }
        deal_content.children[(iNum * curNum + i)].style.display = 'block';
      }
    }

    ini(iNum);

  }
};

 

 

posted @ 2016-09-07 11:00  strongWill  阅读(92)  评论(0编辑  收藏  举报