您的位置:首页 > Web前端 > JQuery

分享自己写的纯JS(jQuery)分页控件,也希望高手给予优化

2010-09-14 12:37 375 查看
var Paginator = {

//by ken

current_page : 1,

page_count : 1,

display_count : 10,

p_container_id : "paginator",

init : function(data, func_loaddata){

if(data && data.curpage)

Paginator.current_page = data.curpage;

if(data && data.size)

Paginator.page_count = data.size;

if(func_loaddata)

Paginator.loadData = func_loaddata;

if(data && data.p_container_id)

Paginator.p_container_id == data.p_container_id;

Paginator.gotoPage(Paginator.current_page);

},

_getHtml : function(){

if(Paginator.page_count <= 1)

return "";

var html = new Array();

html.push("<div class='paginator'>");

html.push("<ul>");

if(Paginator.current_page >1)

html.push("<li><a href='javascript://' onclick='Paginator.gotoPage("+ (Paginator.current_page - 1) +");'>previous</a></li>");

else

html.push("<li><a href='javascript://' class='unable'>previous</a></li>");

if(Paginator.page_count <= Paginator.display_count)

for(var i=1; i <= Paginator.page_count + 1; i++){

if(i == Paginator.current_page)

html.push("<li><a class='pagenum selected' href='javascript://'>" + i + "</a>");

else

html.push("<li><a class='pagenum' href='javascript://' onclick='Paginator.gotoPage("+ i +");'>" + i + "</a></li>");

}

if(Paginator.page_count >= Paginator.display_count){

var start_number = 1; end_number = Paginator.display_count;

if(Paginator.current_page > 3){

start_number = Paginator.current_page - 3; //使得当前页码始终在第三个位置

if(start_number >= Paginator.page_count - Paginator.display_count)

start_number = Paginator.page_count - Paginator.display_count + 1;

}

if (start_number > 1){

end_number = Paginator.display_count + start_number - 1;

if( end_number >= Paginator.page_count)

end_number = Paginator.page_count;

}

//alert(end_number + "," + start_number);

for(var k = start_number; k <= end_number; k++){

if(k == Paginator.current_page)

html.push("<li><a class='pagenum selected' href='javascript://'>" + k + "</a>");

else

html.push("<li><a class='pagenum' href='javascript://' onclick='Paginator.gotoPage("+ k +");'>" + k + "</a></li>");

}

}

if(Paginator.current_page < Paginator.page_count)

html.push("<li><a href='javascript://' onclick='Paginator.gotoPage("+ (Paginator.current_page + 1) +");'>next</a></li>");

else

html.push("<li><a href='javascript://' class='unable'>next</a></li>");

html.push("</ul>");

html.push("</div>");

return html.join("\r");

},

loadData : function(){},

gotoPage : function(p){

Paginator.current_page = p;

document.getElementById(Paginator.p_container_id).innerHTML = Paginator._getHtml();

Paginator.loadData(Paginator.current_page);

}

}

/*Paginator*/

.paginator {}

.paginator ul {list-style:none;}

.paginator li{float:left; margin-left:5px;}

.paginator li a { height:20px;

line-height:20px;

padding:2px;

text-decoration:none;

text-align:center;

display:block;

border:1px solid #000;

color:#000;

}

.paginator li .pagenum { width:20px;}

.paginator li .selected { color:#fff; background:#000;}

.paginator li .unable { color:#CCC; border:1px solid #ccc;}

使用示例
Paginator.init({size:25, curpage:5, p_container_id:"paginator"},
function(p){
//此处做page number 变化后重新加载数据的操作, 参数p为当前页码
});

还是给个演示地址: http://www.weatrue.com/paginator.html
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: