`

用jQuery实现的一个分页工具栏

阅读更多
先看下效果图:


这是第一次写博文,是关于学习jQuery完成的一个实例,希望大家不吝赐教。
以下是代码片段,完整的demo详见附件! 望和大家一起学习进步。谢谢!
	/**
	 * @described 分页组件
	 * @author xuxb
	 * @see 通过jquery完成页面数据的分页工具栏 pagetoolbar
	 * @see 用于缓解页面数据量过大而导致页面停顿或假死现象
	 * @mark 定义的局部变量为私有变量 提供对应的方法进行操作, 如 this.totalSize = totalSize; 将破坏对象的封装
	 * @created 2011-05-30
	 */
	var pageInfo = null; // 全局分页信息
	var PAGE_SIZE = 10;  // 每页显示多少条
	
	function turnPage(pageNo) { // 翻页操作
		pageInfo.currentPage = pageNo;
		pageInfo.show();
	}

	
	function PageComponent(totalSize, pageSize, currentPage) {
		this.totalSize = totalSize;
		this.pageSize = pageSize;
		this.currentPage = currentPage;
		this.toolbarSize = 7; // 默认的页码个数  (奇数可以保持页码对称)
		this.step = 3;  // 当前页码的前、后页码数(步长)
		
		if (PageComponent._init==undefined) {  // 调用初始化方法 -- 
			this.init();
			PageComponent._init = 1;
		}
	}
	PageComponent.prototype.init = function() {   // 完成一些初始化动作init
//		$("#tipPage").text(this.getTipPage());
	};
	
	PageComponent.prototype.getStartIndex = function() {  // 获取开始索引值
		if (this.currentPage == 1) 
			return 0;
		else 
			return (this.currentPage - 1) * this.pageSize;
	};
	PageComponent.prototype.getEndIndex = function() {  // 获取结束索引值
		if (this.currentPage == 1) 
			return this.pageSize;
		else 
			if (this.currentPage * this.pageSize >= this.totalSize) {
				return this.totalSize;
			}
			else {
				return this.currentPage * this.pageSize;
			}
	};
	PageComponent.prototype.getPageCount = function() { // 获取总页数
		return Math.ceil(this.totalSize / this.pageSize);
	};
	
	PageComponent.prototype.getUpPage = function() {  // 获取上一页 页码
		if (this.currentPage - 1 < 1) 
			return 1;
		return this.currentPage - 1;
	};
	
	PageComponent.prototype.getDownPage = function() { // 获取下一页 页码
		if (this.currentPage >= this.getPageCount()) 
			return this.getPageCount();
		return this.currentPage + 1;
	};
	
	PageComponent.prototype.getFirstPage = function() { // 获取下一页 页码
		return 1;
	};
	
	PageComponent.prototype.getTipPage = function() { // 获取提示信息
		return "第" + this.currentPage + "页/共" + this.getPageCount() + "页  共有结果" + this.totalSize + "条";
	};
	
	PageComponent.prototype.computePage = function() {
		$("#toolbar").hide();
//		$("#tipPage").text(this.getTipPage());
//		$("#firstPage").val(this.getFirstPage());
//		alert($("#upPage").val());
//		$("#upPage").val(this.getUpPage());
//		$("#downPage").val(this.getDownPage());
//		$("#endPage").val(this.getPageCount());
		$("#tipPage").html(this.getTipPage());
		$("#toolbar").show();
	};
	
	PageComponent.prototype.pageToolbar = function() {//公式
		/*
		 * 重新理思路
		 * 1. 根据当前页码生成待生成的JSON格式页码 如{"< Prev":"1","2":"2",....,"Next >":"2"}
		 * 2. 可分为2种情况实现 
		 */
		var jsonArray = new Array();
		var items = "";
		jsonArray.push('"< Prev ":"'+this.getUpPage()+'"'); // 上一页
		jsonArray.push('"'+this.getFirstPage()+'":"'+this.getFirstPage()+'"'); // 首页
		
		if (this.getPageCount() <= this.toolbarSize) {// 情况一:需要生成的页码小于或等于默认值
			for (var i = 1; i <= this.getPageCount(); i++) {
				if (this.currentPage<=this.yardage*2) {
					jsonArray.push('"'+i+'":"'+i+'"'); // 格式如下 "2":"2"
				}
			}
		} else { // 情况二:需要生成的页码大于默认值
			
			var start = parseInt(this.currentPage)-parseInt(this.step); // 3
			var end = parseInt(this.currentPage)+parseInt(this.step);
			
			if (start<this.step) {  // 起始值小于step
				start=2;
				end=start+2*this.step-1;
			}else if (end>this.getPageCount()) { // 结束值大于总页数
				end=this.getPageCount();
				start=end-2*this.step;
			}

			for (var i=start; i<=end; i++) {
				
				if(i==start&&start>=this.step) { // first...
					jsonArray.push('"first...":"..."');
				}
				
				jsonArray.push('"'+i+'":"'+i+'"'); // 格式如下 "2":"2"
				
				if (i==end&&end<this.getPageCount()-1) { // after...
					jsonArray.push('"after...":"..."');
				}
			}
		}
		
		jsonArray.push('"'+this.getPageCount()+'":"'+this.getPageCount()+'"'); // 末页
		jsonArray.push('" Next >":"'+this.getDownPage()+'"');// 下一页
		

		jsonArray = "{" + jsonArray.join(",") + "}";
		
		jsonArray = $.parseJSON(jsonArray);
		var temp = this.currentPage;  // 保存当前页码值
//		var regx = /^\d+$/;
		$.each(jsonArray, function(i, n) {
			if (!isNaN(n)) {
				items += "<li";
				if (temp==n&&i==n) { // 当前页和当前待生成的页码一样, 并且生成页码的key和value相等。
					items += " class='currentpage'";
				} else if (temp==n&&i!=n) {
					// 1.若当前页没有上一页,上一页按钮css为dispage
					// 2.若当前页没有下一页,下一页按钮css为dispage
					items += " class='dispage'";
				} else {
					items += " onclick='javascript:turnPage("+n+");'";
				}
				items += ">&nbsp;"+i+"&nbsp;</li>"
			} else {
				items += n; // ... 省略号
			}
			
		});
		
		$("#ulpage").empty();
		$("#ulpage").append(items);
	};
	
	PageComponent.prototype.addClass = function(className) { // 鼠标悬停切换样式
		$(".ulpage li").bind("mouseover mouseout", function() {
			$(this).toggleClass(className);
		});
	};
	
	PageComponent.prototype.show = function(pageNo) {
		
		if (pageNo!=null&&pageNo!="") {  // 可以接收参数,当前页码
			this.currentPage = pageNo;
		}
		/*
		 * 前置条件:
		 *  1.当前页码大于0
		 *  2.总记录数大于0
		 *  3.当前页码必须小于总页码
		 */
		if (this.currentPage > 0 && this.totalSize > 0 && this.currentPage <= this.getPageCount()) {
			
			this.computePage();
			this.pageToolbar();
			this.addClass("ulpageunderline");  // 样式ulpageunderline
			
			var hidepart = $("#table2 tr:not(.list_table_tr)"); // 隐藏部分CSS的id选择器
			hidepart.hide();
			for (i = this.getStartIndex(); i < this.getEndIndex(); i++) {
				hidepart.eq(i).show();
			}
		}
	};

1
1
分享到:
评论

相关推荐

    基于Jquery实现表格动态分页实现代码共7页.pdf.z

    同时,你需要设计一个分页导航栏,通常包含“首页”、“上一页”、“下一页”、“末页”等按钮以及当前页数和总页数的显示。 Jquery的$.ajax方法是进行Ajax请求的关键。你可以设置URL指向服务器端处理分页请求的...

    ssh和jQuery分页

    标题中的“ssh”通常指的是Java开发中的三个框架——Spring、Struts和Hibernate的组合,而“jQuery分页”则是指在前端使用jQuery库实现数据分页功能。在Web开发中,SSH框架常用于构建后端逻辑,而jQuery则用于增强...

    jQuery动态表格数据分页插件

    首先,jQuery是一个广泛使用的JavaScript库,它简化了HTML文档遍历、事件处理、动画以及Ajax交互等任务。jQuery动态表格数据分页插件就是基于jQuery构建的,利用其强大的功能来处理表格数据的分页逻辑。 在网页设计...

    用JQuery做的一个分页效果

    标题中的“用JQuery做的一个分页效果”指的是使用JavaScript库JQuery实现的网页分页功能。在网页中,特别是数据量较大的时候,为了提高用户体验和加载速度,通常会采用分页显示数据,而不是一次性加载所有内容。...

    Jquery easyUI分页实现

    分页组件是jQuery EasyUI中的一个重要组成部分,用于显示大量的数据。它提供了一种交互式的界面,允许用户按需加载和切换数据页面,提高了网页的响应速度和用户体验。 3. **分页配置** 要实现jQuery EasyUI的分页...

    jQuery+PHP实现FCKEditor内容分页

    标题“jQuery+PHP实现FCKEditor内容分页”涉及到的是在网页内容编辑中,如何利用jQuery、PHP以及FCKEditor工具来实现文章或文本的分页功能。FCKEditor是一款强大的富文本编辑器,常用于网站后台内容管理,允许用户在...

    jquery mobile分页显示插件

    jQuery Mobile 是一个流行的前端框架,用于构建响应式和触控友好的移动 web 应用程序。在处理大量数据时,分页是必不可少的功能,它帮助用户更有效地浏览内容,而不是一次性加载所有信息。"jQuery Mobile 分页显示...

    jQuery基于Bootstrap分页插件.zip

    总的来说,"jQuery基于Bootstrap分页插件.zip" 提供了一个高效且易于使用的工具,使得在Bootstrap项目中实现分页功能变得简单。配合"说明.htm" 和 "jiaoben5709" 文件,开发者可以快速上手并定制自己的分页组件,...

    jquery.pager.js jquery分页

    文件`yckart-jquery.pager.js-68fd201`表明这是`jquery.pager.js`的一个特定版本,版本号`68fd201`可能是Git仓库中的一个提交ID,意味着此版本可能包含了一些特定的修复或改进。在实际使用中,开发者需要根据项目的...

    bs 分页插件不包含bootstrap和jquery的

    Bootstrap分页插件是一种广泛使用的工具,它通常依赖于Bootstrap框架和jQuery库来实现美观且响应式的分页效果。然而,有些情况下,开发者可能希望创建一个不依赖于这些外部库的分页插件,以减少页面加载时间或避免库...

    jquery 分页插件,simplePagination

    首先,jQuery分页插件如`jquery.page`和`jquery.simplePagination`是用于在网页中实现分页功能的工具。它们通过简单的API调用和配置选项,使得开发者能够快速地在网页上添加分页功能,无需编写大量的自定义代码。这...

    Jquery分页控件

    总之,jQuery分页控件是网页开发中不可或缺的工具之一,它简化了分页逻辑的实现,让网页在处理大量数据时依然保持流畅、高效的用户体验。开发者可以根据自身项目的需求,灵活调整和定制这个控件,以达到最佳的效果。

    jquery_easyui_DataGrid分页操作

    jQuery EasyUI DataGrid 是一个基于 jQuery 和 EasyUI 框架的数据展示组件,它提供了丰富的功能,包括数据的加载、排序、筛选以及我们关注的分页功能。在本篇文章中,我们将深入探讨如何在实际应用中实现 jQuery ...

    datalist分页技术及实现

    5. 分页导航:创建一个分页导航栏,包含“上一页”、“下一页”和页码选择器。用户点击时,更新分页参数并重新发起请求,加载对应页的数据。 6. 动态加载与懒加载:为了进一步提升性能,可以采用动态加载或懒加载...

    Json 格式分页、Jquery easy ui 增删改查例子

    下面是一个使用JQuery EasyUI实现增删改查的基本步骤: 1. **数据绑定**:首先,你需要将从服务器获取的JSON数据绑定到`datagrid`中。这可以通过设置`url`属性来实现,EasyUI会自动发送Ajax请求获取数据。 ```...

    jquery实现表单搜索利器

    本文将深入探讨如何使用jQuery实现一个高效的表单搜索功能,将其转化为一个实用的工具,帮助用户快速找到含有特定关键词的信息。 首先,我们要理解jQuery的核心理念:它提供了一种简洁的API,使得开发者能用更少的...

    jquery不错的分页控件实例及文档

    jQuery作为一个强大的JavaScript库,提供了丰富的插件来实现分页功能,其中之一就是“jQuery分页控件”或称“pagination”。这个控件能够帮助开发者轻松创建美观、实用的分页界面。 **一、jQuery分页插件基础概念**...

    类似播放器jQuery分页插件.zip

    此“类似播放器jQuery分页插件”可能是一个用于实现网页内容分页显示的工具,其设计灵感可能来源于音乐播放器或视频播放器的界面样式,提供一种视觉上独特且用户友好的体验。 首先,我们要理解jQuery分页插件的基本...

Global site tag (gtag.js) - Google Analytics