JavaScript 实现分页效果

一、需求示例图

二、需求分析

 1、分页依据元素: 当前页码, 后端的页码总数

 2、页数小于等于6, 直接在当前页码显示左右相邻页码

 3、页数大于等于7, 根据 余数（= 总页码数 - 当前页码数）来做判断

三、注释源码

注：代码依赖jQuery库

 function   paging ( currentPage, totalPage ) {
      var  p = currentPage, t =  totalPage,
        linkStr  = '';  //   页码链接(后面 + 页码参数),也可以作为参数传递 

     //   插入一个页码包装器 
    $('<div class="pagination"></div>').appendTo('body' );
      var  pageWrap = $('.pagination' );

      if  (t > 0 ) {
          //   只有一页,插入当前页码并返回 
         if  (t == 1 ) {
            pageWrap.append( '<a class="active">' + p + '</a>' );
              return  ;
        }

          //   插入当前页码 
        pageWrap.append('<a class="active">' + p + '</a>' );

          //   处理上一页,下一页 
         var  curPage = pageWrap.find('.active' );
        prevStr  = '<a class="prev" href="' + linkStr + 'p=' + (p-1) + '">' + '&lt;' + '</a>' ,
        nextStr  = '<a class="next" href="' + linkStr + 'p=' + (p+1) + '">' + '&gt;' + '</a>' ;

          if  (p === 1 ) {
            curPage.before( '<a class="prev">&lt;</a>' );
            curPage.after(nextStr);
        }
          else   if  (p ===  t) {
            curPage.before(prevStr);
            curPage.after( '<a class="next">&gt;</a>' );
        }
          else   {
            curPage.before(prevStr);
            curPage.after(nextStr);
        }

          //   处理当前页相邻页码 
         //   页数小于等于6 
         if  (p <= 6 ) {
              for  ( var  i = 0; i < t-p; i++ ) {
                curPage.after( '<a href="' + linkStr + 'p=' + (t-i) + '">' + (t-i) + '</a>' );
            }
              for  ( var  i = 0; i < p-1; i++ ) {
                curPage.before( '<a href="' + linkStr + 'p=' + (i+1) + '">' + (i+1) + '</a>' );
            }
        }
          //   页数大于等于7, 判断当前页左右的页码数来处理 
         else   {

              //   间隔页码数 = 总页码 - 当前页码 
             var  intervalNum = t -  p;
            
              //   当前页左右各最多显示5个页码 
             //   显示右侧页码 
             if  (intervalNum > 5 ) {
                  //   p必须为数值类型，否则(p+1)会执行字符串拼接 
                 var  rtStr = '<a href="' + linkStr + 'p=' + (p+1) + '">' + (p+1) +'</a>'
                + '<a href="' + linkStr + 'p=' + (p+2) + '">' + (p+2) +'</a>' + '<span class="apostrophe">...</span>'
                + '<a href="' + linkStr + 'p=' + (t-1) + '">' + (t-1) +'</a>'
                + '<a href="' + linkStr + 'p=' + t + '">'+ t +'</a>' ;

                curPage.after(rtStr);
            }
              else   {
                  for  ( var  i = 0; i < intervalNum; i++ ) {
                    curPage.after( '<a href="' + linkStr + 'p=' + (t - i) + '">' + (t - i) + '</a>' );
                }
            }
              //   显示左侧页码 
             if  (p > 6 ) {
                  var  ltStr = '<a href="' + linkStr + 'p=' + 1 + '">' + 1 +'</a>'
                + '<a href="' + linkStr + 'p=' + 2 + '">'+ 2 +'</a>' + '<span class="apostrophe">...</span>'
                + '<a href="' + linkStr + 'p=' + (p-2) + '">' + (p-2) +'</a>'
                + '<a href="' + linkStr + 'p=' + (p-1) + '">'+ (p-1) +'</a>' ;
                
                curPage.before(ltStr);
            }
              else   {
                  for  ( var  i=0; i < p-1; i++ ) {
                    curPage.before( '<a href="' + linkStr + 'p=' + (1+i) + '">' + (1+i) + '</a>' );
                }
            }
            
              //   最后处理页码跳转 
             var  actionStr = '<div class="action-wrap"><label for="action-pageval">跳转到:</label>' +
            '<input id="action-pageval" type="text"></input>'+
            '<a class="page-submit">GO</a>' + '</div>' ;
            $( '.pagination .next' ).after(actionStr);
            
              function   setPageLink(e){
                  var  target =  e.target,
                pageVal  =  $(target).val();
                pageVal  = parseInt(pageVal, 10 );
                
                  if  (pageVal >= 1 ) {
                    $( '.action-wrap .page-submit').attr('href', linkStr + 'p=' +  pageVal);
                }
            }
              function   actionPage(e){
                  var   actionLink, keyCode, target, pageVal, actionLink;
                target  =  e.target;
                pageVal  =  $(target).val();
                pageVal  = parseInt(pageVal, 10 );

                  //   获取键码, 13为回车(Enter)键的键码 
                keyCode = ( typeof  e.charCode == 'number') ?  e.charCode : e.keyCode;
                  if  (keyCode == '13' &&　pageVal >= 1 ) {
                    actionLink  = linkStr + 'p=' +  pageVal;
                    window.location.href(actionLink);
                }
            }

            $( '#action-pageval').bind('change blur' ,  setPageLink)
            .bind( 'keypress' , actionPage);
        }
    }
}

  //   方法调用 
paging( 5, 120 );

PS：该代码整理自项目实践代码，水平有限，望高手指点。

分类: JavaScript

作者： Leo_wl

出处： http://HdhCmsTestcnblogs测试数据/Leo_wl/

本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。

版权信息

查看更多关于JavaScript 实现分页效果的详细内容...

声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did45481

更新时间：2022-09-24 阅读：48次