JS分页

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

//obj.append('<div class="page_title">');

//obj.append('第' + parseInt(args.current)+'/'+parseInt(args.pageCount) + '页  共 ' + args.total + ' 记录');

//obj.append('</div>');

if(args.pageCount > 0){

if(parseInt(args.current) == 1){

obj.append('<a href="javascript:void(0)">首页</a>');

obj.append('<a href="javascript:void(0)">上一页</a>');

}

if(parseInt(args.current) >= 2){

obj.append('<a href="javascript:void(0);">首页</a>');

obj.append('<a href="javascript:void(0);" class="prevPage">上一页</a>');

}

/*

if(parseInt(args.current) == 1){

obj.append('<span class="current">1</span>');

if(parseInt(args.pageCount) >= 2){

obj.append('<a href="javascript:void(0);" class="tcdNumber">' + (parseInt(args.current) + 1) + '</a>');

}

if(parseInt(args.pageCount) >= 3){

obj.append('<a href="javascript:void(0);" class="tcdNumber">' + (parseInt(args.current) + 2) + '</a>');

}

if(parseInt(args.pageCount) >= 4){

obj.append('<a href="javascript:void(0);" class="tcdNumber">' + (parseInt(args.current) + 3) + '</a>');

}

if(parseInt(args.pageCount) >= 5){

obj.append('<a href="javascript:void(0);" class="tcdNumber">' + (parseInt(args.current) + 4) + '</a>');

}

}

if(parseInt(args.current) == 2){

obj.append('<a href="javascript:void(0);" class="tcdNumber">' + (parseInt(args.current) - 1) + '</a>');

if(parseInt(args.pageCount) >= 2){

obj.append('<span class="current">2</span>');

}

if(parseInt(args.pageCount) >= 3){

obj.append('<a href="javascript:void(0);" class="tcdNumber">' + (parseInt(args.current) + 1) + '</a>');

}

if(parseInt(args.pageCount) >= 4){

obj.append('<a href="javascript:void(0);" class="tcdNumber">' + (parseInt(args.current) + 2) + '</a>');

}

if(parseInt(args.pageCount) >= 5){

obj.append('<a href="javascript:void(0);" class="tcdNumber">' + (parseInt(args.current) + 3) + '</a>');

}

}

*/

if(parseInt(args.current) < 5){//当多于两个时交给下一个循环

for(var i = 1;i <= 7; i++){

if(parseInt(args.current) == i){//当前页显示

obj.append('<span class="current">' + i + '</span>');

}else if(parseInt(args.pageCount) >= i){//可递增页显示

obj.append('<a href="javascript:void(0);" class="tcdNumber">' + i + '</a>');

}else{

break;

}

}

}

if(parseInt(args.current) >=5 && parseInt(args.current) <= (parseInt(args.pageCount)-4)){

obj.append('<a href="javascript:void(0);" class="tcdNumber">' + (parseInt(args.current) - 3) + '</a>');

obj.append('<a href="javascript:void(0);" class="tcdNumber">' + (parseInt(args.current) - 2) + '</a>');

obj.append('<a href="javascript:void(0);" class="tcdNumber">' + (parseInt(args.current) - 1) + '</a>');

obj.append('<span class="current">' + parseInt(args.current) + '</span>');

obj.append('<a href="javascript:void(0);" class="tcdNumber">' + (parseInt(args.current) + 1) + '</a>');

obj.append('<a href="javascript:void(0);" class="tcdNumber">' + (parseInt(args.current) + 2) + '</a>');

obj.append('<a href="javascript:void(0);" class="tcdNumber">' + (parseInt(args.current) + 3) + '</a>');

}

//做减法防止页数小于0

if(parseInt(args.current) >= 5 && parseInt(args.current) > (parseInt(args.pageCount)-4)){

if(parseInt(args.current) == parseInt(args.pageCount)){

if(parseInt(args.current) > 6){

obj.append('<a href="javascript:void(0);" class="tcdNumber">' + (parseInt(args.current) - 6) + '</a>');

}

if(parseInt(args.current) > 5){

obj.append('<a href="javascript:void(0);" class="tcdNumber">' + (parseInt(args.current) - 5) + '</a>');

}

obj.append('<a href="javascript:void(0);" class="tcdNumber">' + (parseInt(args.current) - 4) + '</a>');

obj.append('<a href="javascript:void(0);" class="tcdNumber">' + (parseInt(args.current) - 3) + '</a>');

obj.append('<a href="javascript:void(0);" class="tcdNumber">' + (parseInt(args.current) - 2) + '</a>');

obj.append('<a href="javascript:void(0);" class="tcdNumber">' + (parseInt(args.current) - 1) + '</a>');

obj.append('<span class="current">' + parseInt(args.current) + '</span>');

}

if(parseInt(args.current) == parseInt(args.pageCount)-1){

if(parseInt(args.current) > 5){

obj.append('<a href="javascript:void(0);" class="tcdNumber">' + (parseInt(args.current) - 5) + '</a>');

}

obj.append('<a href="javascript:void(0);" class="tcdNumber">' + (parseInt(args.current) - 4) + '</a>');

obj.append('<a href="javascript:void(0);" class="tcdNumber">' + (parseInt(args.current) - 3) + '</a>');

obj.append('<a href="javascript:void(0);" class="tcdNumber">' + (parseInt(args.current) - 2) + '</a>');

obj.append('<a href="javascript:void(0);" class="tcdNumber">' + (parseInt(args.current) - 1) + '</a>');

obj.append('<span class="current">' + parseInt(args.current) + '</span>');

obj.append('<a href="javascript:void(0);" class="tcdNumber">' + (parseInt(args.current) + 1) + '</a>');

}

if(parseInt(args.current) == parseInt(args.pageCount)-2){

obj.append('<a href="javascript:void(0);" class="tcdNumber">' + (parseInt(args.current) - 4) + '</a>');

obj.append('<a href="javascript:void(0);" class="tcdNumber">' + (parseInt(args.current) - 3) + '</a>');

obj.append('<a href="javascript:void(0);" class="tcdNumber">' + (parseInt(args.current) - 2) + '</a>');

obj.append('<a href="javascript:void(0);" class="tcdNumber">' + (parseInt(args.current) - 1) + '</a>');

obj.append('<span class="current">' + parseInt(args.current) + '</span>');

obj.append('<a href="javascript:void(0);" class="tcdNumber">' + (parseInt(args.current) + 1) + '</a>');

obj.append('<a href="javascript:void(0);" class="tcdNumber">' + (parseInt(args.current) + 2) + '</a>');

}

if(parseInt(args.current) == parseInt(args.pageCount)-3){

obj.append('<a href="javascript:void(0);" class="tcdNumber">' + (parseInt(args.current) - 3) + '</a>');

obj.append('<a href="javascript:void(0);" class="tcdNumber">' + (parseInt(args.current) - 2) + '</a>');

obj.append('<a href="javascript:void(0);" class="tcdNumber">' + (parseInt(args.current) - 1) + '</a>');

obj.append('<span class="current">' + parseInt(args.current) + '</span>');

obj.append('<a href="javascript:void(0);" class="tcdNumber">' + (parseInt(args.current) + 1) + '</a>');

obj.append('<a href="javascript:void(0);" class="tcdNumber">' + (parseInt(args.current) + 2) + '</a>');

obj.append('<a href="javascript:void(0);" class="tcdNumber">' + (parseInt(args.current) + 3) + '</a>');

}

}

if(parseInt(args.current) < parseInt(args.pageCount)){

obj.append('<a href="javascript:void(0);" class="nextPage">下一页</a>');

obj.append('<a href="javascript:void(0);">末页</a>');

}

if(args.current == args.pageCount){

obj.append('<a href="javascript:void(0)">下一页</a>');

obj.append('<a href="javascript:void(0)">末页</a>');

}

}

})();

},

//绑定事件

bindEvent:function(obj,args){

return (function(){

obj.one("click","a.tcdNumber",function(){

var current = parseInt($(this).text());

ms.fillHtml(obj,{"current":current,"pageCount":parseInt(args.pageCount)});

if(typeof(args.backFn)=="function"){

args.backFn(current);

}

});

//上一页

obj.one("click","a.prevPage",function(){

var current = parseInt(obj.children("span.current").text());

ms.fillHtml(obj,{"current":current-1,"pageCount":parseInt(args.pageCount)});

if(typeof(args.backFn)=="function"){

args.backFn(current-1);

}

});

//下一页

obj.one("click","a.nextPage",function(){

var current = parseInt(obj.children("span.current").text());

ms.fillHtml(obj,{"current":current+1,"pageCount":parseInt(args.pageCount)});

if(typeof(args.backFn)=="function"){

args.backFn(current+1);

}

});

})();

}

}

$.fn.createPage = function(options){

var args = $.extend({

pageCount : 10,

current : 1,

total : 0,

backFn : function(){}

},options);

ms.init(this,args);

}

})(jQuery);

/*

<!-- CSS显示 -->

.tcdPageCode{color: #ccc;text-align:center;}

.tcdPageCode a{display: inline-block;color: #666;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 #FD6596;}

.tcdPageCode span.current{display: inline-block;height: 25px;line-height: 25px;padding: 0 10px;margin: 0 2px;color: #fff;background-color: #FD6596;
border: 1px solid #FD6596;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;}

<!-- 分页数据展示 -->

<div id="tcdPageCode">

<div class="tcdPageCode"></div>

</div>

<!-- 调用JS函数 -->

function showList(obj,page) {

$.ajax({

type: "post",

url: smvc+"/goods/img.html?pid="+obj+"&page="+page,

dataType: "json",

success: function(data){

var arr = [];

var rows = data["rows"];

for(var row in rows){

arr.push('<div class="image">');

arr.push('<div class="scope">');

arr.push('<img src="'+rows[row].url+'"/>');

arr.push('</div>');

arr.push('</div>');

}

$("#imgList").html(arr.join(""));

//重构分页视图(因为数据记录是动态的,每一次请求页数和总记录数都有可能变化)

$("#tcdPageCode").html($("#tcdPageCode").html());//消除多次实例化后的对象事件

$(".tcdPageCode").createPage({

pageCount:data["pageCount"],//总页数

current:data["currentPage"],//当前页

total:data["total"],//总记录数

backFn:function(p){

showList(obj,p);//点击页数触发函数

}

});

}

});

}

*/