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);
    
      }
    };
    
    
    

     

  • 相关阅读:
    git怎么创建本地版本仓库
    win7系统下,vs2010一调式,vs就关闭要重启
    ASP.NET常见面试题及答案(130题)
    easyui日期在未加载easyui-lang-zh_CN.js出现英文的情况下加载中文的方法
    LigerUi框架+jquery+ajax无刷新留言板系统的实现
    asp.net正则模板引擎代码
    SubSonic2.2框架的使用方法和配置说明
    LigerUI一个前台框架增、删、改asp.net代码的实现
    自定义easyui整数或者数字、字母或者下划线验证方法
    VS2010在64位系统中连接64位Oracle出现的问题和解决方法
  • 原文地址:https://www.cnblogs.com/xueyu-1/p/5848631.html
Copyright © 2011-2022 走看看