`

js 根据总页数 和 规律的页面名称 动态创建分页条

阅读更多



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

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 = " &nbsp;页次:&nbsp;<label id='current_page_lbl'>{0}</label>/{1} &nbsp;<label id='total_count_lbl'>共 {2} 条记录</label>,&nbsp;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));
   });
   
}

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics