JS分頁，js分頁代碼

JS分頁，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) + '頁&nbsp;&nbsp;共&nbsp;' + args.total + '&nbsp;記錄');
//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);//點擊頁數觸發函數
       }
   });
}
});
}
 */