`

小旭改的分页代码

js 
阅读更多
/**
	 * 说明: 在页面指定元素中构建分页条
	 * @param curPage 当前第几页
	 * @param totalPage 一共有多少页
	 * @param clickHandler 点击事件,传入参数为当前第几页
	 * @param barCount 分页条共显示多少个按钮
	 */
	$.fn.pagination = function(curPage, totalPage, clickHandler, barCount){
		var pageBarNum = 5;
		if(barCount){
			pageBarNum = barCount;
		}
		var tar = $(this).addClass("pagination");
		var start = 1;
		var end = totalPage;
		if(totalPage > pageBarNum){
			var index = Math.floor(pageBarNum/2);
			var start = (curPage-index) > 0 ? (curPage-index) : 1;
			if(totalPage - start <= pageBarNum){
				start = totalPage - pageBarNum + 1;
			}
			var end = start + pageBarNum;
		}
		var pageHtml = "";
		if(curPage > 1){
			pageHtml += "<a p='" + (curPage - 1) + "'>«</a>";
		}else{
			pageHtml += "<a class='disabled'>«</a>";
		}
		for (var i = start; i < end; i++) {
			if (i > totalPage)
				break;
			if (i == curPage) {
				pageHtml += '<a class="disabled">' + i + '</a>';
			} else {
				pageHtml += "<a p='" + i + "'>" + i + "</a>";
			}
		}

		if(curPage < totalPage){
			pageHtml += "<a p='" + (curPage + 1) + "'>»</a>";
		}else{
			pageHtml += "<a class='disabled'>»</a>";
		}
		tar.html(pageHtml);
		if(clickHandler){
			tar.find("a[p]").bind("click", function(){
				var page = $(this).attr("p");
				clickHandler(page);
			});
		}
	}
	

样式:
.pagination{
	display: inline-block;
}
.pagination a{
	display: inline-block;
	float: left;
	padding: 0 14px;
	line-height: 38px;
	text-align: center;
	border-width: 1px 1px 1px 0px;
	border-style: solid;
	border-color: #ccc;
	font-size:14px;
}
.pagination a:first-child{
	border-radius: 3px 0 0 3px;
	border-left: 1px solid #ccc;
}
.pagination a:last-child{
	border-radius: 0 3px 3px 0;
}
.pagination a:hover{
	background-color: whiteSmoke;
	text-decoration: none;
}
.pagination .disabled{
	background-color: whiteSmoke;
	color: #999;
	cursor: default;
}
小旭<folyred@gmail.com>  15:49:47
 
分享到:
评论

相关推荐

    分页代码 分页代码 分页代码

    分页代码分页代码分页代码分页代码分页代码分页代码分页代码分页代码分页代码分页代码分页代码分页代码分页代码分页代码分页代码分页代码分页代码分页代码分页代码分页代码分页代码分页代码分页代码分页代码分页代码...

    PHP内容分页.新闻内容分页代码,分页代码

    PHP内容分页,新闻内容分页代码,分页代码

    分页代码 重分页代码

    在这个场景中,"分页代码 重分页代码" 指的是在SSH框架下实现分页功能的代码,并且强调了代码的复用性,即在一个工程中只需要一个公共的分页类。 分页的目的是为了提高用户体验,避免一次性加载大量数据导致页面...

    js分页代码,分页代码

    - 虽然示例代码中没有完整展示分页逻辑,但从变量命名和注释中可以看出,主要涉及到的内容包括:确定每页显示多少内容、如何根据当前页数显示内容、如何生成分页导航等。 ### 五、扩展知识点 除了基本的分页功能...

    asp论坛分页数字分页代码

    这个"asp论坛分页数字分页代码"是一个实用的小工具,可以帮助开发者快速实现论坛内容的分页显示。 首先,我们来理解一下分页的基本概念。分页是将大量数据分割成若干小块,每次只显示一部分,用户可以通过点击页码...

    PHP的分页源代码 分页代码

    接下来我们对给定的PHP分页代码进行详细分析: 1. **引入数据库连接文件**: ```php include("conn.php");//数据库连接 ``` 2. **定义每页显示的记录数**: ```php $page_size=10;//每页显示的记录数 ``` 3...

    JS+HTML分页代码

    本示例提供的"JS+HTML分页代码"是一个利用JavaScript(JS)和超文本标记语言(HTML)实现的分页功能,主要包含了首页、前页、后页、尾页以及自定义分页页号的功能。 **HTML基础**: HTML是网页的基础,用于构建页面...

    请求加分页代码

    请求加分页代码

    java万能分页代码

    Java万能分页代码是Java开发中常用的工具,尤其在处理大数据量的Web应用时,分页技术能够显著提升用户体验并优化服务器性能。这个3.0版本的分页代码库通常包含了一些经过优化的分页算法和接口,适用于各种场景,如...

    经典的10种JS分页代码

    这篇内容将详细介绍10种经典的JS分页代码实现方法,帮助开发者理解和应用这些技术。 1. **基础HTML和CSS分页**:最简单的分页实现,通常结合HTML链接和CSS样式来创建分页条目。开发者需要计算总页数,然后创建相应...

    非常实用ASP通用分页代码

    ASP通用分页代码是网页开发中的一个重要组成部分,特别是在处理大量数据需要分页显示的场景下。这个代码模块的目的是为了提高开发效率,实现代码的复用,并确保用户在浏览多页内容时能轻松导航。以下将详细介绍这个...

    非常优秀的Java分页代码

    本资源提供了一套非常优秀的Java分页代码,它旨在简化开发过程,使得开发者能够轻松地在应用程序中实现分页功能。 分页的基本原理是将大量的数据集分割成较小的部分,每次只加载一部分数据到内存中,用户可以逐页...

    asp.net AJAX分页 分页代码

    本教程将深入探讨ASP.NET AJAX分页的相关知识点,以及如何编写分页代码。 1. **什么是ASP.NET AJAX分页?** ASP.NET AJAX分页是一种通过使用ASP.NET AJAX库(以前称为Atlas)实现的客户端分页方法。它利用...

    asp分页代码,通用代码

    分页是将一个大列表的数据分割成多个小部分,每次只加载一部分到页面上,用户可以通过点击页码来切换不同的数据块。在ASP中,实现分页通常涉及以下几个关键步骤: 1. **数据库查询**:根据当前页码和每页显示的数据...

    ASP.NET分页代码

    在这个“ASP.NET分页代码”的主题中,我们将深入探讨如何在ASP.NET中实现分页功能。 1. 分页的基本原理 分页主要是通过限制在页面上显示的数据量来实现的。当用户请求一个页面时,服务器只返回当前页所需的数据,而...

    asp数字分页代码

    ### ASP数字分页代码解析与应用 #### 一、引言 在Web开发中,当数据量较大时,为了提高用户体验并减轻服务器负担,通常会采用分页技术来展示数据。ASP(Active Server Pages)是一种早期的服务器端脚本环境,可以...

    java分页代码下载

    根据提供的文件信息,我们可以分析出该段代码是用于实现基于Java技术的Web应用程序中的分页功能。虽然这里的代码示例采用的是ASP.NET的语法结构,但我们可以从中抽取出与Java分页相关的概念和技术要点,并结合Java...

    纯JS长文章分页代码

    ### 纯JS长文章分页代码解析 在网页开发中,为了提高用户体验及加载速度,经常需要将过长的文章内容进行分页处理。本文基于提供的文件内容,深入解析一个用纯JavaScript实现的文章分页代码。 #### 核心概念与功能 ...

    仿百度分页代码 谷歌分页代码

    标题与描述中的“仿百度分页代码 谷歌分页代码”主要涉及的是网站开发中常见的分页功能实现。在大数据量的处理场景下,为了提升用户体验和服务器性能,分页显示数据成为了一种常见且必要的技术手段。本文将详细解析...

    ASP分页代码(非常实用)

    本文将深入探讨ASP分页代码的实现原理和应用。 首先,理解分页的基本概念。分页是将一个长列表的数据分成多个较小的部分,每个部分称为一页,用户可以逐页浏览。在ASP中,我们通常会用到数据库查询来获取数据,然后...

Global site tag (gtag.js) - Google Analytics