`
雁栖湖
  • 浏览: 23801 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

JS分页页码

    博客分类:
  • JS
 
阅读更多
/**
 * 显示分页
 * @param {} pageUtil PageUtil对象的名字
 * @param {} pageNo 当前页
 * @param {} totalPage 总页数
 * @param {} url 访问的路径
 * @param {} pageSize 每页记录数 不填写可以设置为""
 * @param {} div_id 展示分页页码的div ID
 * @param {} param 其他参数,即追加在url后面,必须以&开头,如:param = "&paramName=paramVal"
 * @param {} form_id 表单ID
 */
 function pageShow(pageUtil, pageNo, totalPage, pageSize, div_id, form_id) {
 	 if (totalPage > 1) {
		var html_show = "";
		//是否显示上一页
		if (pageNo != 1) {
	 		html_show += "<a href='" + ROOT_PATH + url + "?" + pageUtil + ".pageNo=" + (pageNo - 1) + "&" + pageUtil + ".pageSize=" + pageSize + param + "'>上一页&nbsp;&nbsp;</a>";
	 	}
	 	
	 	if (totalPage < 11) {
		 	for (var i = 1; i <= totalPage; i++) {
		 		if (pageNo == i) {
		 			html_show += "&nbsp;[" + i + "]&nbsp;";
		 		} else {
		 			html_show += "<a href='" + ROOT_PATH + url + "?" + pageUtil + ".pageNo=" + i + "&" + pageUtil + ".pageSize=" + pageSize + param + "'>&nbsp;&nbsp;[" + i + "]&nbsp;&nbsp;</a>";
		 		}
		 	}
	 	} else { //总页数大于十页
           if (parseInt((pageNo - 1) / 10) == 0) {
                for (i = 1; i <= 10; i++) {
                    if (i != pageNo) {
                        html_show += "<a href='" + ROOT_PATH + url + "?" + pageUtil + ".pageNo=" + i + "&" + pageUtil + ".pageSize=" + pageSize + param + "'>&nbsp;&nbsp;[" + i + "]&nbsp;&nbsp;</a>";
                    } else {
                        html_show += "&nbsp;[" + i + "]&nbsp;";
                    }
                }
            } else if (parseInt((pageNo - 1) / 10) == parseInt(totalPage / 10)) {
                for (i = parseInt(totalPage / 10) * 10 + 1; i <= totalPage; i++) {
                    if (i != pageNo) { 
                    	html_show += "<a href='" + ROOT_PATH + url + "?" + pageUtil + ".pageNo=" + i + "&" + pageUtil + ".pageSize=" + pageSize + param + "'>&nbsp;&nbsp;[" + i + "]&nbsp;&nbsp;</a>"; 
                    } else {
                        html_show += "&nbsp;[" + i + "]&nbsp;";
                    }
                }
            } else {
                for (i = parseInt((pageNo - 1) / 10) * 10 + 1; i <= parseInt((pageNo - 1) / 10) * 10 + 10; i++) {
                    if (i != pageNo) {
                        html_show += "<a href='" + ROOT_PATH + url + "?" + pageUtil + ".pageNo=" + i + "&" + pageUtil + ".pageSize=" + pageSize + param + "'>&nbsp;&nbsp;[" + i + "]&nbsp;&nbsp;</a>";
                    } else {
                        html_show += "&nbsp;[" + i + "]&nbsp;";
                    }
                }
            }
        }
        //是否显示下一页
	 	if (pageNo < totalPage) {
	 		html_show += "<a href='" + ROOT_PATH + url + "?" + pageUtil + ".pageNo=" + (pageNo + 1) + "&" + pageUtil + ".pageSize=" + pageSize + param + "'>&nbsp;&nbsp;下一页</a>";
	 	}
	 	$("#" + div_id).append(html_show);
 	}
 	
 	/**
 	 if (totalPage > 1) {
		var html_show = "<div id='paging_div_id' align='right' class='page'>";
		
		html_show += "共&nbsp;" + totalPage + 
		"&nbsp;页&nbsp;当前第&nbsp;<input type='textfield' id='" + pageUtil + 
		"_pageno' value='" + pageNo + 
		"' length='3'>&nbsp;页 <a id='" + pageUtil + "_page_goto' href='#'>GO</a>";
		
		html_show +="<input type='hidden' name='" + pageUtil + 
			".start' id='" + pageUtil + 
			"start' value='${" + pageUtil + ".start}' />" + 
		      "<input type='hidden' name='" + pageUtil + 
		      ".limit' id='" + pageUtil + 
		      "limit' value='${" + pageUtil + ".limit}' />";
			
      
		//是否显示上一页
		if (pageNo > 1) {
	 		html_show += "<a id='" + pageUtil + "page_previous' href='#'>上一页</a>";
	 	}
	 	
        //是否显示下一页
	 	if (pageNo < totalPage) {
	 		html_show += "<a id='" + pageUtil + "page_next' href='#'>下一页</a>";
	 	}
	 	html_show += "</div>";
	 	$("#" + div_id).append(html_show);
	 	
	 	var start = (pageNo - 1) * pageSize;
		var limit = pageSize;
		
		$("#" + pageUtil + "page_previous").click(function() {
			$("#" + pageUtil + "start").val(start - limit);
			$("#" + form_id).submit();
		});
		
		$("#" + pageUtil + "page_next").click(function() {
			$("#" + pageUtil + "start").val(start + limit);
			$("#" + form_id).submit();
		});
		
		$("#" + pageUtil + "_page_goto").click(function() {
			$("#" + pageUtil + "start").val(($("#" + pageUtil + "_pageno").val() - 1) * limit);
			$("#" + form_id).submit();
		});
 	}
 	*/
 	
			
}

 

分享到:
评论

相关推荐

    仿网页分页页码

    总的来说,"仿网页分页页码"涉及了前端开发中的HTML、CSS、JavaScript等多个方面,它不仅需要技术上的熟练掌握,还需要对用户体验有深刻的理解,以创建出既实用又美观的分页系统。通过不断实践和优化,我们可以为...

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

    - `jiaoben6243.js`:这应该是实现分页功能的JavaScript源代码文件。文件名可能表示某种编码或者版本号,具体内容需要查看文件以了解实际功能。 5. **关键函数与方法**: - `calculateTotalPages(dataLength, ...

    javascript分页(页码生成)

    ### JavaScript分页(页码生成)详解 在Web开发中,分页是处理大量数据时常用的一种技术,它能够有效地提升用户体验,避免一次性加载过多数据导致页面响应缓慢。本文将详细解析一个基于JavaScript的简单分页实现...

    使用js实现打印分页的功能(包括页码,表头,表尾)

    使用js实现打印分页的功能(包括页码,表头,表尾)

    JQuery实现Ajax分页后自动生成页码工具

    **jQuery实现Ajax分页后自动生成页码工具详解** 在Web开发中,数据量庞大的页面通常需要采用分页展示,以提高用户体验。Ajax技术的引入,使得页面可以在不刷新整个页面的情况下实现数据的动态加载,这极大地提升了...

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

    JavaScript分页是网页开发中一个常见且重要的功能,主要用于处理大量数据时的显示优化,避免一次性加载过多内容导致页面响应速度变慢或者消耗过多的网络资源。本篇将深入探讨JavaScript实现分页的相关知识点,包括...

    使用Bootstrap实现分页,并且当页码过多时使用省略号

    使用Bootstrap实现分页,并且当页码过多时使用省略号,这篇文章有样式的简单演示:https://blog.csdn.net/u013025627/article/details/50485327 样式只是自己的简单样式,不同的项目有不同的样式风格,只是提供分页...

    div+css制作非常实用的24款分页页码css代码

    本资源提供的是使用div+css技术编写的24种实用分页页码样式,这些代码可以帮助开发者创建出美观且功能齐全的分页组件。下面将详细介绍这个资源中的关键知识点以及如何运用它们。 首先,`div` 和 `css` 是Web前端...

    js分页批量打印例子并去掉页码和下面的地址

    综上所述,这个例子中涉及的JS分页批量打印并去除页码和地址,是一个综合性的任务,需要结合JavaScript和CSS来完成。在实践中,可能还需要考虑到不同浏览器的兼容性问题,以及如何优雅地处理大量数据的分页和打印。

    js分页javascript分页

    2. Pagination.js:一个独立的JavaScript分页库,支持自定义分页样式,支持Ajax请求数据。 3. vue-paginate:针对Vue.js框架的分页组件,易用且高度可定制。 4. react-pagination:适用于React应用的分页组件,可与...

    分页页码aaa

    "分页页码aaa" 可能指的是一个特定的分页实现,或者是一个项目中的分页组件名称。下面我们将深入探讨前端分页页码的相关知识点。 1. **分页的基本概念**: 分页是一种数据展示策略,它将大量数据分成若干小块,...

    js分页功能 js分页功能

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

    分页js文件

    在这个主题中,我们将深入探讨"分页js"的相关知识点,包括分页的基本原理、JavaScript实现分页的方法、以及如何结合CSS(如`pageNav.css`)优化分页的样式。 首先,我们要理解分页的基本概念。分页通常用于显示...

    jQuery分页插件页码跳转代码.zip

    jQuery分页插件是实现这一功能的强大工具,它简化了JavaScript代码,让开发者可以快速实现动态分页效果。本资源"jQuery分页插件页码跳转代码.zip"提供了实现这一功能的代码示例。 首先,我们需要了解jQuery分页的...

    JS+HTML分页代码

    这个列表可以通过JavaScript动态生成,根据配置的分页显示数量(如5个页码)和当前页位置进行裁剪。 **应用场景**: 分页广泛应用于各种数据密集型的网页,如电商网站的产品列表、论坛的帖子列表、新闻网站的文章...

    Javascript分页效果(收集了很多强大的JS分页代码)

    这个压缩包中包含了多个JavaScript分页代码示例,适合网页开发者参考和直接应用。 分页效果的实现通常包括以下几个核心部分: 1. 数据获取:首先,需要获取要分页展示的数据。这些数据可以来源于服务器端(如通过...

    js分页效果

    总的来说,"js分页效果"是一个综合性的前端开发任务,涵盖了JavaScript基础、DOM操作、事件处理、数据交互、动画效果等多个方面。通过这个示例,开发者不仅可以学习到分页的实现技巧,还能加深对前端开发整体流程的...

    js分页插件

    实现JavaScript分页插件的方法多种多样,例如可以使用纯JavaScript编写,也可以借助于流行的前端框架如jQuery、Vue.js或React来简化实现。下面以一个基本的纯JavaScript分页插件为例,阐述其工作流程: 1. **初始化...

    js分页实例asp服务端

    在这个“js分页实例asp服务端”的示例中,我们将探讨如何结合JavaScript(js)前端技术和ASP服务端技术来实现动态数据分页。 首先,我们需要理解分页的基本原理。分页通常涉及到两个主要部分:前端的用户界面(UI)...

Global site tag (gtag.js) - Google Analytics