`

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));
   });
   
}

分享到:
评论

相关推荐

    js html动态分页

    1. **计算总页数**:根据服务器返回的数据总量和每页展示的数据条数,可以计算出总页数。例如,如果有500条数据,每页显示20条,则总页数为25页。 2. **HTML结构**:创建分页的基本HTML结构,一般包括上一页、...

    原生JS设置页码页数分页代码.zip

    - `generatePageNumbers(currentPage, totalPages)`:生成页码数组,根据当前页和总页数创建页码按钮。 - `changePage(pageNumber)`:根据传入的页码,更新页面显示的内容和高亮当前页码。 6. **优化点**: - **...

    编程开发-综合控件-jQuery根据总页数进行分页代码(pageGroup.js.zip

    在这个`pageGroup.js`中,我们可以预期找到的是一套完整的jQuery插件,用于动态创建分页导航,并根据用户的请求加载相应页面的数据。 分页的核心思想是通过计算总页数,然后根据当前页数展示相应的页码链接。以下是...

    使用jquery实现表格动态分页

    3. **返回响应**:后端获取到数据后,以JSON格式返回给前端,包括数据列表和总条数,以便前端计算总页数。 **三、前后端交互** 1. **发送Ajax请求**:前端使用jQuery的`$.ajax`或`$.get`、`$.post`方法向后端发送...

    JS+HTML分页代码

    1. **计算页码**:根据总条数和每页显示的条数计算总页数。 2. **事件监听**:为HTML元素绑定点击事件,如点击“下一页”或页码按钮,JavaScript将响应这些事件并更新页面内容。 3. **生成分页链接**:创建表示页码...

    jquery动态分页数据获取代码

    4. **更新分页导航**:根据返回的总页数,更新分页导航的状态,例如禁用无法点击的“上一页”或“下一页”。 5. **优化用户体验**:可以添加一些额外的功能,如加载指示器、错误处理等,来提升用户体验。 在提供的...

    纯js分页模板

    - 计算分页参数:首先,需要根据总数据量和每页显示的条目数来计算总页数。如果数据量可变,还需考虑动态更新分页信息。 - 显示页码:创建一个包含页码的DOM结构,可以是简单的数字列表,也可以是带有上一页、...

    js分页javascript分页

    JavaScript分页是网页开发中常用的一种技术,用于处理大量数据时,将数据分割成多个页面进行展示,提高用户体验。在不加载所有数据的情况下,只加载用户当前查看的部分,这样可以减少页面加载时间,提高页面性能。...

    js分页示例,前台分页,客户端分页,分页机制,js分页

    2. **计算页数**:根据每页显示的数据量和总数据量,计算出总的页数。 3. **展示控制**:创建页码导航,让用户可以跳转到指定页。 4. **数据筛选**:根据当前页码,从所有数据中筛选出对应页的数据进行展示。 5. **...

    分页js文件

    1. 计算总页数:根据数据总数和每页显示的条目数计算出总页数。 2. 创建分页导航:生成一个包含页码的HTML结构,可以是简单的数字列表,也可以包含“上一页”、“下一页”等链接。 3. 绑定事件:为分页导航的每个...

    js分页功能 js分页功能

    JavaScript(简称JS)是一种轻量级的脚本语言,广泛应用于网页和网络应用开发,包括实现动态内容、用户交互、页面行为控制等。在大型数据展示或者列表展示时,为了提高用户体验,通常会采用分页功能来将大量数据分块...

    jquery 分页工具条

    在网页开发中,分页是常见的一种数据展示方式,尤其在数据量较大的情况下,它可以有效提高用户体验,避免一次性加载过多内容导致页面响应慢或者浏览器崩溃。`jQuery` 分页工具条就是实现这一功能的插件,它使得在...

    JS分页控件+CSS

    2. **动态生成分页元素**:根据总页数,JS可以创建并插入HTML元素,如页码按钮,使得用户能够轻松导航。 3. **响应用户操作**:当用户点击页码或使用其他导航选项时,JavaScript会捕获这些事件,更新显示的内容,并...

    kettle动态分页与循环抽取大数据

    在Kettle中,这可以通过创建一个工作流或者转换来实现,其中包含计算当前页码和总页数的逻辑。 1. **计算当前页码**:Kettle可以通过使用JavaScript步骤或者其他计算步骤来动态计算当前页码。这通常涉及到设置一个...

    JS+Jquery分页插件

    本主题聚焦于使用JavaScript和jQuery实现的分页插件,通过引入`pagebar.css`、`jquery-1.4.2.min.js`和`pagebar-1.0.js`这三份文件,我们可以创建一个功能完备且用户友好的分页系统。 首先,`jquery-1.4.2.min.js`...

    经典的10种JS分页代码

    JavaScript(JS)是一种广泛应用于网页和网络应用的脚本语言,尤其在网页动态效果和用户交互方面发挥着重要作用。在大型数据展示或者长列表的情况下,分页是必不可少的功能,它帮助用户更有效地浏览和管理大量的信息...

    js分页带省略号

    3. **总页数(totalPages)**:根据总条数和每页条数计算得出的页面总数。 4. **当前页(currentPage)**:用户当前查看的页面。 5. **页码显示范围(displayRange)**:一般会显示当前页前后一定数量的页码,如果...

    js端 分页导航条

    在JavaScript(JS)中实现分页导航条是Web开发中常见的需求,特别是在处理大量数据时,为了提高用户体验,通常会将数据分批加载。本文将深入探讨如何在前端实现一个功能完备的分页导航条。 首先,理解分页的基本...

    js写的仿extjs的分页工具条

    关键组成部分包括:总记录数、每页显示的记录数、当前页数和总页数。 实现这个功能的第一步是设计HTML结构,这通常包括一个容器元素,用于放置分页按钮和其他控制元素。例如,可以创建一个`div`元素作为工具条,并...

    jQuery分页插件设置分页内容显示数量的分页代码

    在网页开发中,分页是一...值得注意的是,这只是一个基础的示例,实际应用中可能还需要考虑其他因素,如数据的异步加载、动态计算总页数、自定义分页样式等。根据项目的具体需求,你可以对这个基础示例进行扩展和定制。

Global site tag (gtag.js) - Google Analytics