javascript显示分页按钮代码一例

发布时间:2020-04-09编辑:脚本学堂
有关javascript显示分页按钮的一段代码,可以设置每页显示多少个分页按钮,需要的朋友参考下。

例子,javascript显示分页按钮的代码
 

复制代码 代码示例:

/**
 * 获取分页按钮
 * @param total_page 总页数
 * @param current_page  当前页
 * @param num每页显示多少个分页按钮
 * @returns {String}
 */ www.jb200.com
function get_page_html(total_page,current_page,num){

var page_html = "";
if(isNaN(total_page) && isNaN(current_page)){

}else{
//范围判断
if(current_page>total_page) {
current_page = total_page;
}

// 当前页的前后各显示多少页
var count = Math.floor(num/2);

// 当前页后面要显示的页数
var after_count = count;
if(count-current_page>0){
after_count += (count-current_page);
}
if(total_page<=1) {
//只有一页
page_html += '<ul class="pagination">';
page_html += '<li class="active"><a href="javascript:pageQuery(1)">1</a></li>';
page_html += '</ul>';
}else if(total_page<=num){
page_html += '<ul class="pagination">';
 //把页数全部显示出来
for(var i=1;i<=total_page;i++) {
if(current_page==i){
   page_html += '<li class="active"><a href="javascript:pageQuery('+current_page+')">'+current_page+'</a></li>';
}else{
   page_html += '<li><a href="javascript:pageQuery('+i+')">'+i+'</a></li>';
}
}
page_html += '</ul>';
}else {
page_html += '<ul class="pagination">';

//显示前一页按钮
if(current_page-count>1) {
page_html += '<li><a href="javascript:pageQuery('+(current_page-1)+')">&laquo;</a></li>';
}
//显示当前页前面的页码按钮
for(var i=count;i>=1;i--) {
if(current_page-i>0){
page_html += '<li><a href="javascript:pageQuery('+(current_page-i)+')">'+(current_page-i)+'</a></li>';
}
}

// 当前页按钮
page_html += '<li class="active"><a href="javascript:pageQuery('+current_page+')">'+current_page+'</a></li>';

// 显示当前页后面的页码按钮
for(var j=1;j<=after_count;j++){
if((current_page+j)<=total_page){
page_html += '<li><a href="javascript:pageQuery('+(current_page+j)+')">'+(current_page+j)+'</a></li>';
}
}

//显示后一页按钮
if(current_page+count<total_page){
page_html += '<li><a href="javascript:pageQuery('+(current_page+1)+')">&raquo;</a></li>';
}
page_html += '</ul>';
}
}
return page_html;
}

效果:
javascript显示分页按钮