简单的分页代码js实现

发布时间：2017-01-15, 16:32:39 分类：HTML | 编辑 off 网址 | 辅助

图集1/1

正文 6058字数 360,454阅读

1、效果描述：
不用分页即可显示的jQuery插件
jQuery分页插件——jQuery.page.js用法很简单，效果很棒
2、调用方法：

$(".tcdPageCode").createPage({ 
  pageCount:10, 
  current:1, 
  backFn:function(p){ 
   //单击回调方法，p是当前页码 
  } 
 }); 
 pageCount：总页数 
 current：当前页

Run code

Cut to clipboard

3、js封装代码

//分页插件 
/** 
ch 
**/ 
(function($){ 
 var ms = { 
  init:function(obj,args){ 
   return (function(){ 
    ms.fillHtml(obj,args); 
    ms.bindEvent(obj,args); 
   })(); 
  }, 
  //填充html 
  fillHtml:function(obj,args){ 
   return (function(){ 
    obj.empty(); 
    //上一页 
    if(args.current > 1){ 
     obj.append('<a href="javascript:;" class="prevPage">上一页</a>'); 
    }else{ 
     obj.remove('.prevPage'); 
     obj.append('<span class="disabled">上一页</span>'); 
    } 
    //中间页码 
    if(args.current != 1 && args.current >= 4 && args.pageCount != 4){ 
     obj.append('<a href="javascript:;" class="tcdNumber">'+1+'</a>'); 
    } 
    if(args.current-2 > 2 && args.current <= args.pageCount && args.pageCount > 5){ 
     obj.append('<span>...</span>'); 
    } 
    var start = args.current -2,end = args.current+2; 
    if((start > 1 && args.current < 4)||args.current == 1){ 
     end++; 
    } 
    if(args.current > args.pageCount-4 && args.current >= args.pageCount){ 
     start--; 
    } 
    for (;start <= end; start++) { 
     if(start <= args.pageCount && start >= 1){ 
      if(start != args.current){ 
       obj.append('<a href="javascript:;" class="tcdNumber">'+ start +'</a>'); 
      }else{ 
       obj.append('<span class="current">'+ start +'</span>'); 
      } 
     } 
    } 
    if(args.current + 2 < args.pageCount - 1 && args.current >= 1 && args.pageCount > 5){ 
     obj.append('<span>...</span>'); 
    } 
    if(args.current != args.pageCount && args.current < args.pageCount -2 && args.pageCount != 4){ 
     obj.append('<a href="javascript:;" class="tcdNumber">'+args.pageCount+'</a>'); 
    } 
    //下一页 
    if(args.current < args.pageCount){ 
     obj.append('<a href="javascript:;" class="nextPage">下一页</a>'); 
    }else{ 
     obj.remove('.nextPage'); 
     obj.append('<span class="disabled">下一页</span>'); 
    } 
   })(); 
  }, 
  //绑定事件 
  bindEvent:function(obj,args){ 
   return (function(){ 
    obj.on("click","a.tcdNumber",function(){ 
     var current = parseInt($(this).text()); 
     ms.fillHtml(obj,{"current":current,"pageCount":args.pageCount}); 
     if(typeof(args.backFn)=="function"){ 
      args.backFn(current); 
     } 
    }); 
    //上一页 
    obj.on("click","a.prevPage",function(){ 
     var current = parseInt(obj.children("span.current").text()); 
     ms.fillHtml(obj,{"current":current-1,"pageCount":args.pageCount}); 
     if(typeof(args.backFn)=="function"){ 
      args.backFn(current-1); 
     } 
    }); 
    //下一页 
    obj.on("click","a.nextPage",function(){ 
     var current = parseInt(obj.children("span.current").text()); 
     ms.fillHtml(obj,{"current":current+1,"pageCount":args.pageCount}); 
     if(typeof(args.backFn)=="function"){ 
      args.backFn(current+1); 
     } 
    }); 
   })(); 
  } 
 } 
 $.fn.createPage = function(options){ 
  var args = $.extend({ 
   pageCount : 10, 
   current : 1, 
   backFn : function(){} 
  },options); 
  ms.init(this,args); 
 } 
})(jQuery);

Run code

Cut to clipboard

4、使用demo:

<!DOCTYPE html> 
<html lang="zh-cn" xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta charset="utf-8" /> 
<title>一个非常简单的jQuery分页插件</title> 
<style> 
*{ margin:0; padding:0; list-style:none;} 
a{ text-decoration:none;} 
a:hover{ text-decoration:none;} 
.tcdPageCode{padding: 15px 20px;text-align: left;color: #ccc;} 
.tcdPageCode a{display: inline-block;color: #428bca;display: inline-block;height: 25px; line-height: 25px; padding: 0 10px;border: 1px solid #ddd; margin: 0 2px;border-radius: 4px;vertical-align: middle;} 
.tcdPageCode a:hover{text-decoration: none;border: 1px solid #428bca;} 
.tcdPageCode span.current{display: inline-block;height: 25px;line-height: 25px;padding: 0 10px;margin: 0 2px;color: #fff;background-color: #428bca; border: 1px solid #428bca;border-radius: 4px;vertical-align: middle;} 
.tcdPageCode span.disabled{ display: inline-block;height: 25px;line-height: 25px;padding: 0 10px;margin: 0 2px; color: #bfbfbf;background: #f2f2f2;border: 1px solid #bfbfbf;border-radius: 4px;vertical-align: middle;} 
</style> 
</head> 
<body> 
<style> 
.baidu_ads{ width:960px; height:90px; position:absolute; left:50%; bottom:0; margin-left:-480px; overflow:hidden;} 
</style> 
<div class="baidu_ads"> 
</div> 
 
<span style="display:none;"> 
</span><!-- 代码部分begin --> 
 <div class="tcdPageCode"> 
 </div> 
 
 调用方法： 
$(".tcdPageCode").createPage({ 
  pageCount:10, 
  current:1, 
  backFn:function(p){ 
   //单击回调方法，p是当前页码 
  } 
 }); 
 pageCount：总页数 
 current：当前页 
 
</body> 
<script src="http://www.jb51.net/ajaxjs/jquery.min.js"></script> 
<script src="http://www.jb51.net/ajaxjs/jquery.page.js"></script> 
<script> 
 $(".tcdPageCode").createPage({ 
  pageCount:6, 
  current:1, 
  backFn:function(p){ 
   console.log(p); 
  } 
 }); 
</script> 
<!-- 代码部分end --> 
</html>

Run code

Cut to clipboard

（支付宝）给作者钱财以资鼓励（微信）→

有过 3 条评论 »

广西南宁市 2017-04-26, 14:43:54

【JavaScript】一个简单的分页，显示页首，中间页，页尾，当前页的前后三页，省略其它页
有时候，比如共100页，并不一定要仅提供页首、页尾按钮，然后10页10页显示，
显示页首，中间页，页尾，当前页的前后三页，省略其它页也是一种不错的选择。
比如如下的分页：

首先，页面布局很简单，两个行内文本，一个显示当前的页数，与设定一个总页数。这里假定总页数共40页。
然后，用一个id="pagingDiv"的div放置分页链接。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>分页</title>
    </head>
    <body>
	第<span id="pagingText"></span>页，共<span id="total">40</span>页
    	<div id="pagingDiv"></div>
    </body>
</html>

关键是如下的脚本。

<script>
	//首先获取当前的总页数，一般是后台传递过来的，这里假定40页。
    var total = document.getElementById("total").innerHTML;
	//id="pagingDiv"的div通过pagingConstruct函数构造，比如加载网页是第1页的
    pagingConstruct(1);
	//形式参数paging是指当前页
    function pagingConstruct(paging){
		//先更新一下行内文本
        document.getElementById("pagingText").innerHTML = paging;
        var pagingDivInnerHTML = "";
		//这里是加载省略号的flag
        var isHiddenExist = 0;
		//从第1页读到第40页。
        for (var i = 1; i <= total; i++) {
			//如果读到当前页，就仅仅加载一个文本，不放链接
            if (i == paging) {
                pagingDivInnerHTML += i + " ";
            }
            else {
				//如果是页首，中间页，页尾，当前页的前后三页则不省略。
                if (i < 4 || i < (paging + 3) && i > (paging - 3) || i > (total / 2 - 2) && i < (total / 2 + 2) || i > (total - 3)) {
                    pagingDivInnerHTML += "<a href='javascript:void(0)' onclick='pagingConstruct(" + i + ")'>" + i + "</a> ";
                    isHiddenExist = 0;
                }
				//否则就构造...
                else {
                    if (isHiddenExist == 0) {
                        pagingDivInnerHTML += "...";
                        isHiddenExist = 1;
                    }
                }
            }
        }
		//把构造的内容放上去pagingDiv
        document.getElementById("pagingDiv").innerHTML = pagingDivInnerHTML;
    }
</script>

这个isHiddenExist的意思，是如果构造了一次...点点点，就不要再构造了。当你遇到不省略的内容之后，再构造...

reply | quote | #¹

广西南宁市 2017-04-26, 16:43:05

layPage多功能js分页组件

reply | quote | #²

广西南宁市 2017-04-26, 16:44:08

Js数组分页



<ul id="biuuu_city_list"></ul>

<div id="biuuu_city"></div>



<script src="laypage/laypage.js"></script>
<script>

//测试数据
var data = [
    '北京',
    '上海',
    '广州',
    '深圳',
    '杭州',
    '长沙',
    '合肥',
    '宁夏',
    '成都',
    '西安',
    '南昌',
    '上饶',
    '沈阳',
    '济南',
    '厦门',
    '福州',
    '九江',
    '宜春',
    '赣州',
    '宁波',
    '绍兴',
    '无锡',
    '苏州',
    '徐州',
    '东莞',
    '佛山',
    '中山',
    '成都',
    '武汉',
    '青岛',
    '天津',
    '重庆',
    '南京',
    '九江',
    '香港',
    '澳门',
    '台北'
];

var nums = 5; //每页出现的数量
var pages = Math.ceil(data.length/nums); //得到总页数

var thisDate = function(curr){
    //此处只是演示，实际场景通常是返回已经当前页已经分组好的数据
    var str = '', last = curr*nums - 1;
    last = last >= data.length ? (data.length-1) : last;
    for(var i = (curr*nums - nums); i <= last; i++){
        str += '<li>'+ data[i] +'</li>';
    }
    return str;
};

//调用分页
laypage({
    cont: 'biuuu_city',
    pages: pages,
    jump: function(obj){
        document.getElementById('biuuu_city_list').innerHTML = thisDate(obj.curr);
    }
})
</script>

reply | quote | #³

Records:3 1/1 «‹1 ›»

lizhenqiu blog

简单的分页代码js实现

相关日志

有过 3 条评论 »

留下評論