zoukankan      html  css  js  c++  java
  • 分页

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

     

  • 相关阅读:
    Open vSwitch使用案例扩展实验
    hdoj-1233-还是畅通工程
    DS实验题 Floyd最短路径 & Prim最小生成树
    DS实验题 Missile
    Mininet实验 基于Mininet实现BGP路径挟持攻击实验
    Gift for GS5
    Bellman-Ford算法
    pox目录中的交换机mac地址学习模块 l2_multi源码
    Mininet实验 使用l2_multi模块寻找最短路径实验
    Ubuntu安装Flash
  • 原文地址:https://www.cnblogs.com/xueyu-1/p/5848631.html
Copyright © 2011-2022 走看看