• 分页


    
    
    <!--分页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);
    
      }
    };
    
    
    

     

  • 相关阅读:
    STL之list函数详解
    深入剖析deque容器实现
    STL之deque详解
    STL之vector函数详解
    关于vector大小(size)和容量(capacity)总结
    typename 与 typedef的区别与应用
    oracle解除锁表【原】
    Spring触发器触发2次问题【转】
    JQuery弹出层,点击按钮后弹出遮罩层,有关闭按钮【转】
    使用JavaScript修改浏览器URL地址栏的实现代码【转】
  • 原文地址:https://www.cnblogs.com/xueyu-1/p/5848631.html
Copyright © 2020-2023  润新知