`

JQuery实现在分页的时候添加一个设置每页显示多少条数据的功能

阅读更多
尽管现在微博或者SNS类的网站流行一页一页的下拉累加,或者这个是出于放缓用户的浏览速度,而且回看的时候不用重新请求了;但是这是以牺牲页码导航为代价的,因为如果你当前在第二页要到第10页你就得一页一页的下拉。
基于此如果在页码导航的情况下再添加一个设置每页显示多少条数据的功能,那么应该很有灵活性了。下面是浏览器端的JQuery实现:


<html>

	<head>
		<script type="text/javascript" src="http://www.w3school.com.cn/jquery/jquery.js"></script>
		<script type="text/javascript">

		var pageSize="20";//Pager对象的pageSize属性值

		$(document).ready(function(){

			//用于页面初始化的时候选中与Pager对象的pageSize属性值相同的option
			$(".pageSize").each(function(){
				if($(this).val()==pageSize){
					$(this).attr("selected","selected");
				}
			});

			//用于设置每页显示的数据条数
			$("#pageSizeSelector").change(function (){
				alert("value:"+$(this).attr("value"));
				//submit();
			});

		});

		</script>
	</head>

	<body>

		<select name="page.pageSize" id="pageSizeSelector">
			<option value="10" class="pageSize">10</option>
			<option value="20" class="pageSize">20</option>
			<option value="30" class="pageSize">30</option>
		</select>

	</body>

</html> 








.
分享到:
评论

相关推荐

    jQuery实现AJAX定时刷新局部页面实例

    定时局部刷新用到jQuery里面的setInterval方法,setInterval方法两个参数,第一个是设置定时执行的函数名,第二个是时间,如下代码所示,设置每隔10微秒定时执行一次aa方法。 [removed] $(function(){ setInterval...

    pager-taglib 分页扩展实例

    1.添加输入跳转、每页记录数选择功能 2.显示数据与struts2结合实现各行变色 3.基于jquery.form插件的无刷新表单提交,实现无刷新效果 实现环境:struts2.2.1、dbutils1.3、jdk6、jboss5.1、pager-taglib、mysql、...

    pager-taglib 分页扩展实例(旧)

    1.添加输入跳转、每页记录数选择功能 2.显示数据与struts2结合实现各行变色 3.基于jquery.form插件的无刷新表单提交,实现无刷新效果 实现环境:struts2.2.1、jdk6、jboss5.1、pager-taglib、mysql 以上环境内通过...

    js实现翻页后保持checkbox选中状态的实现方法

    比如酷狗音乐中,上下页选中的歌曲不会保留,只能在每页中选择添加后,再切换下页。 但是项目中有着需求,所以只能完成实现。 项目具体的需求如下:给角色授权时,选择模块以及模块下的操作,点击上下页后选中的...

    DisplayTag1.2 扩展(自定义分页、排序、导出、页面导航)

    3.增强分页导航功能,可以实现输入跳转、选择每页记录数等 4.自定义导出按钮 5.基于jquery.form插件的无刷新表单提交,实现无刷新效果 6.添加鼠标经过变色 实现环境:struts2.2.1、dbutils1.3、jdk6、jboss5.1、...

    DisplayTag1.2 扩展(自定义分页、排序、导出、页面导航)(旧)

    3.增强分页导航功能,可以实现输入跳转、选择每页记录数等 4.自定义导出按钮 5.基于jquery.form插件的无刷新表单提交,实现无刷新效果 6.添加鼠标经过变色 实现环境:struts2.2.1、jdk6、jboss5.1、displaytag1.2、...

    jQuery攻略.pdf

    并且可以设置每页的行数 269 9.2 为图片添加注解 271 9.3 拖放表格中的行 273 9.4 取得、序列化并清理表单控件 275 9.5 通过Ajax提交表单 277 9.6 找到元素的准确位置和大小 281 9.7 以传送带的方式显示图片 284 9.8...

    wordpreeDUX主题

    分类文章不显示在首页 你可以设置一个或多个分类下的文章不显示在首页 置顶文章不显示在首页 你可以设置一个或多个文章不显示在首页 文章分页 文章有多长,分页就有多大用处 阻止百度转码 用自己的风格很重要,禁止...

    jquery 插件 web2.0分格的分页脚本,可用于ajax无刷新分页

    ******生成js分页脚****** ****没剑(2008-03-05)**** 修改日期:2008-3-12 添加两个参数:displaynum,displaylastNum可以自由定制显示的页码数量 参数: pagesize:10 //每页显示的页码数 ,count:0 //数据条数 ,css:...

    asoft签到管理系统tykq3.5_build20110125

    3、为用户管理界面和用户数据导出功能增加了一个时间段筛选的功能,现在可以直观的统计出各个用户在选定时间段的考勤数据总揽了。 4、增加一个控制公告和便签刷新的时间字段 现在管理员可以根据自己的服务器压力...

    Jqury基础教程

    1.4 第一个jQuery驱动的页面 1.4.1 下载jQuery 1.4.2 建立HTML文档 1.4.3 编写jQuery代码 1.4.4 最终结果 1.5 小结 第2章 选择符 2.1 DOM 2.2 工厂函数$() 2.3 CSS选择符 2.4 属性选择符 2.5 自定义选择...

    ExtAspNet_v2.3.2_dll

    -Button控件将不再自动拥有display:inline属性,如果希望两个按钮在一行显示,请为第一个按钮设置CssStyle="float:left;"属性。 -修正了弹出菜单的位置在Firefox下不正确的BUG(feedback:eroach)。 -为TriggerBox...

    JAVA上百实例源码以及开源项目源代码

     Java波浪文字,一个利用Java处理字符的实例,可以设置运动方向参数,显示文本的字符数组,高速文本颜色,显示字体的 FontMetrics对象,得到Graphics实例,得到Image实例,填充颜色数组数据,初始化颜色数组。...

    java面试宝典

    136、在SERVLET中我能调用一个JSP错误页吗 34 137、APPLET和JSP如何通讯 35 138、JSP如何与EJB SessionBean通讯 35 139、当我使用一个结果集时,如何防止字段为"null"的字域显示在我的HTML输入文本域中? 35 140、...

    商用版本文本编辑器DotNetTextBoxV6.0.8Source 源码

    2)修正上传图片功能在修改图片的时候切换到水印控制会出现脚本错误的BUG! 3)修正上传媒体文件功能插入FLV时调整播放器高度及宽度失效的BUG! 4)修正控件自带的FLV播放器播放某些视频时画面尺寸不按比例的BUG! 5)修正...

    ExtAspNet v2.2.1 (2009-4-1) 值得一看

    -Button控件将不再自动拥有display:inline属性,如果希望两个按钮在一行显示,请为第一个按钮设置CssStyle="float:left;"属性。 -修正了弹出菜单的位置在Firefox下不正确的BUG(feedback:eroach)。 -为TriggerBox...

    千方百计笔试题大全

    136、在SERVLET中我能调用一个JSP错误页吗 34 137、APPLET和JSP如何通讯 35 138、JSP如何与EJB SessionBean通讯 35 139、当我使用一个结果集时,如何防止字段为"null"的字域显示在我的HTML输入文本域中? 35 140、...

    JAVA上百实例源码以及开源项目

     Java波浪文字,一个利用Java处理字符的实例,可以设置运动方向参数,显示文本的字符数组,高速文本颜色,显示字体的 FontMetrics对象,得到Graphics实例,得到Image实例,填充颜色数组数据,初始化颜色数组。...

Global site tag (gtag.js) - Google Analytics