• 分页


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

     

  • 相关阅读:
    反流技术之IE插件技术研究第一部分
    c# post和接收的实现
    C# post提交表单的例程
    用C#搭建IE BHO勾子, 取表单密码
    复杂的 DataBinding 接受 IList 或 IListSource 作为数据源" 错误原来是自己的笔误
    C#判断ContextMenuStrip右键菜单的来源(从哪个控件弹出来的)
    练习5.1
    示例:实用函数(Utilities)
    闭包
    一个错误
  • 原文地址:https://www.cnblogs.com/xueyu-1/p/5848631.html
Copyright © 2020-2023  润新知