js 根据总页数和规律的页面名称动态创建分页条 -优快云博客

本文链接：https://blog.youkuaiyun.com/iteye_6961/article/details/82477315

本文介绍了一个基于JavaScript的分页组件实现方法，详细解释了如何通过动态生成页面链接和按钮来实现前后翻页及跳转功能，并针对不同页面状态调整显示样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >



// ---------------公有变量最好用明明空间限制一下-------------------//

var totalPage = 0 ;
var currentPage = 1 ;
var menuType = 0 ;
var totalCount = 0 ;
var first_page = "首页" ;
var prev_page = " 上一页 "
var last_page = " 末页" ;
var next_page = " 下一页" ;
var tag_a_no_current_start = "[<a href='javascript:void(0)'>";
var tag_a_current_start = "[<a href='javascript:void(0)' style='color:#003;'>";
var tag_a_end = "</a>]" ;
var paging_info = "  页次: <label id='current_page_lbl'>{0}</label>/{1}  <label id='total_count_lbl'>共 {2} 条记录</label>， 10条/页"
//首页 
var paging_info_start_0 = first_page+prev_page;
var paging_info_end_0 = tag_a_no_current_start +next_page+tag_a_end+tag_a_no_current_start+last_page+tag_a_end;
//末页
var paging_info_start_1 = tag_a_no_current_start+first_page+tag_a_end+tag_a_no_current_start+prev_page+tag_a_end;
var paging_info_end_1 =  next_page+last_page;
//非首页 、非末页
var paging_info_start_2 = tag_a_no_current_start+first_page+tag_a_end+tag_a_no_current_start+prev_page+tag_a_end;
var paging_info_end_2 = tag_a_no_current_start +next_page+tag_a_end+tag_a_no_current_start+last_page+tag_a_end;

function initPagingBar(pageCount , pageType)
{	
    var $paging_bar = $("#paging_bar");
	//----------------初始页分页条信息-------------------------//
	totalPage = pageCount ;
	menuType = pageType ;
	if ($paging_bar)
	{
	   var sub_paging_bar = "" ;
	   i=0
	   while(i<pageCount)
	   {
			sub_paging_bar += tag_a_no_current_start+(i+1)+tag_a_end ;
		    i++ ;
	   }

	   var pagestr = "<span id='start_span'>"+paging_info_start_0+"</span>" + sub_paging_bar +  "<span id='end_span'>"+paging_info_end_0 +"</span>"+formatPageInfo(pageCount , currentPage ,paging_info ) ;
	   $paging_bar.html(pagestr);
	   setTotalData();
	   $paging_bar.find("a").eq(0).css("color","#003");	
	   setSartAndEndBtnStatus(1,pageCount);
	}

	//----------------设置分页条数字单击加载事件----------------------------//

	$paging_bar.find("a").live("click" ,function(){
			$paging_bar.find("a").css("color","");	   
			currentPage = getCurrentPage($(this).html() );
			$paging_bar.find("a:contains("+currentPage+")").css("color","#003");
			$paging_bar.find("#current_page_lbl").html(currentPage);
			var pageName = pageType+"_"+currentPage+".html" ;

			$("#page_list").load(pageName,function(){
					setSartAndEndBtnStatus(currentPage,totalPage);
				}
			);

		}
	);

}

//格式化分页条尾部信息描述
function formatPageInfo(pageCount,currentPage,paging_info)
{
	paging_info = paging_info.replace("{0}",currentPage).replace("{1}",pageCount);
	return paging_info ;
}

//设置 首页 第一页 下一页 末页 状态

function setSartAndEndBtnStatus(currentPage,totalPage)
{

	var $paging_bar = $("#paging_bar");
	if (currentPage == 1 && currentPage < totalPage)
	{
	 	$paging_bar.find("#start_span").html(paging_info_start_0);
		$paging_bar.find("#end_span").html(paging_info_end_0);		
	} else if (currentPage == 1 && currentPage == totalPage) 
	{
		$paging_bar.find("#start_span").html(paging_info_start_0);
		$paging_bar.find("#end_span").html(paging_info_end_1);

	} else if (currentPage == totalPage) 
	{
		$paging_bar.find("#start_span").html(paging_info_start_1);
		$paging_bar.find("#end_span").html(paging_info_end_1);
	} else 
	{
	    $paging_bar.find("#start_span").html(paging_info_start_2);
		$paging_bar.find("#end_span").html(paging_info_end_2);
	}


}

//根据当前a标签的内容获得当前页
function getCurrentPage($oprHtml)
{
    $oprHtml = $.trim($oprHtml);
	currentPage = parseInt(currentPage);
	if ($oprHtml == "首页")
	{
	   currentPage = 1 ;
	} else if ($oprHtml == "上一页")
	{
	   currentPage = currentPage==1?1:currentPage-1 ;
	} else if ($oprHtml == "下一页")
	{
	   currentPage = currentPage==totalPage?totalPage:currentPage+1 ;
	} else if ($oprHtml == "末页")
	{
	   currentPage = totalPage ;
	} else 
	{
	   currentPage = $oprHtml ;
	}	

	return currentPage ;
}

function setTotalData()
{
   var lastPageName = menuType+"_"+totalPage+".html";
   $("<div></div>").load(lastPageName,function(){
	   var lastPageCount = $(this).find("div").length; 
	   totalCount = (totalPage-1)*10+lastPageCount ;
       var $total_count_html = $("#total_count_lbl").html();

	   $("#total_count_lbl").html($total_count_html.replace("{2}",totalCount));
   });

}