// ---------------公有变量最好用明明空间限制一下-------------------//
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));
});
}
分享到:
相关推荐
1. **计算总页数**:根据服务器返回的数据总量和每页展示的数据条数,可以计算出总页数。例如,如果有500条数据,每页显示20条,则总页数为25页。 2. **HTML结构**:创建分页的基本HTML结构,一般包括上一页、...
- `generatePageNumbers(currentPage, totalPages)`:生成页码数组,根据当前页和总页数创建页码按钮。 - `changePage(pageNumber)`:根据传入的页码,更新页面显示的内容和高亮当前页码。 6. **优化点**: - **...
在这个`pageGroup.js`中,我们可以预期找到的是一套完整的jQuery插件,用于动态创建分页导航,并根据用户的请求加载相应页面的数据。 分页的核心思想是通过计算总页数,然后根据当前页数展示相应的页码链接。以下是...
3. **返回响应**:后端获取到数据后,以JSON格式返回给前端,包括数据列表和总条数,以便前端计算总页数。 **三、前后端交互** 1. **发送Ajax请求**:前端使用jQuery的`$.ajax`或`$.get`、`$.post`方法向后端发送...
1. **计算页码**:根据总条数和每页显示的条数计算总页数。 2. **事件监听**:为HTML元素绑定点击事件,如点击“下一页”或页码按钮,JavaScript将响应这些事件并更新页面内容。 3. **生成分页链接**:创建表示页码...
4. **更新分页导航**:根据返回的总页数,更新分页导航的状态,例如禁用无法点击的“上一页”或“下一页”。 5. **优化用户体验**:可以添加一些额外的功能,如加载指示器、错误处理等,来提升用户体验。 在提供的...
- 计算分页参数:首先,需要根据总数据量和每页显示的条目数来计算总页数。如果数据量可变,还需考虑动态更新分页信息。 - 显示页码:创建一个包含页码的DOM结构,可以是简单的数字列表,也可以是带有上一页、...
JavaScript分页是网页开发中常用的一种技术,用于处理大量数据时,将数据分割成多个页面进行展示,提高用户体验。在不加载所有数据的情况下,只加载用户当前查看的部分,这样可以减少页面加载时间,提高页面性能。...
2. **计算页数**:根据每页显示的数据量和总数据量,计算出总的页数。 3. **展示控制**:创建页码导航,让用户可以跳转到指定页。 4. **数据筛选**:根据当前页码,从所有数据中筛选出对应页的数据进行展示。 5. **...
1. 计算总页数:根据数据总数和每页显示的条目数计算出总页数。 2. 创建分页导航:生成一个包含页码的HTML结构,可以是简单的数字列表,也可以包含“上一页”、“下一页”等链接。 3. 绑定事件:为分页导航的每个...
JavaScript(简称JS)是一种轻量级的脚本语言,广泛应用于网页和网络应用开发,包括实现动态内容、用户交互、页面行为控制等。在大型数据展示或者列表展示时,为了提高用户体验,通常会采用分页功能来将大量数据分块...
在网页开发中,分页是常见的一种数据展示方式,尤其在数据量较大的情况下,它可以有效提高用户体验,避免一次性加载过多内容导致页面响应慢或者浏览器崩溃。`jQuery` 分页工具条就是实现这一功能的插件,它使得在...
2. **动态生成分页元素**:根据总页数,JS可以创建并插入HTML元素,如页码按钮,使得用户能够轻松导航。 3. **响应用户操作**:当用户点击页码或使用其他导航选项时,JavaScript会捕获这些事件,更新显示的内容,并...
在Kettle中,这可以通过创建一个工作流或者转换来实现,其中包含计算当前页码和总页数的逻辑。 1. **计算当前页码**:Kettle可以通过使用JavaScript步骤或者其他计算步骤来动态计算当前页码。这通常涉及到设置一个...
本主题聚焦于使用JavaScript和jQuery实现的分页插件,通过引入`pagebar.css`、`jquery-1.4.2.min.js`和`pagebar-1.0.js`这三份文件,我们可以创建一个功能完备且用户友好的分页系统。 首先,`jquery-1.4.2.min.js`...
JavaScript(JS)是一种广泛应用于网页和网络应用的脚本语言,尤其在网页动态效果和用户交互方面发挥着重要作用。在大型数据展示或者长列表的情况下,分页是必不可少的功能,它帮助用户更有效地浏览和管理大量的信息...
3. **总页数(totalPages)**:根据总条数和每页条数计算得出的页面总数。 4. **当前页(currentPage)**:用户当前查看的页面。 5. **页码显示范围(displayRange)**:一般会显示当前页前后一定数量的页码,如果...
在JavaScript(JS)中实现分页导航条是Web开发中常见的需求,特别是在处理大量数据时,为了提高用户体验,通常会将数据分批加载。本文将深入探讨如何在前端实现一个功能完备的分页导航条。 首先,理解分页的基本...
关键组成部分包括:总记录数、每页显示的记录数、当前页数和总页数。 实现这个功能的第一步是设计HTML结构,这通常包括一个容器元素,用于放置分页按钮和其他控制元素。例如,可以创建一个`div`元素作为工具条,并...
在网页开发中,分页是一...值得注意的是,这只是一个基础的示例,实际应用中可能还需要考虑其他因素,如数据的异步加载、动态计算总页数、自定义分页样式等。根据项目的具体需求,你可以对这个基础示例进行扩展和定制。