jquery ajax分页

fackyou200

浏览: 301918 次
性别:
来自: 山西太原

最近访客更多访客>>

hyw100200

u011407152

centuey_chen

zjhyp

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

jquery

1.jQuery Pagination参数
参数名描述参数值
maxentries 总条目数必选参数，整数
items_per_page 每页显示的条目数可选参数，默认是10
num_display_entries 连续分页主体部分显示的分页条目数可选参数，默认是10
current_page 当前选中的页面可选参数，默认是0，表示第1页
num_edge_entries 两侧显示的首尾分页的条目数可选参数，默认是0
link_to 分页的链接字符串，可选参数，默认是"#"
prev_text “前一页”分页按钮上显示的文字字符串参数，可选，默认是"Prev"
next_text “下一页”分页按钮上显示的文字字符串参数，可选，默认是"Next"
ellipse_text 省略的页数用什么文字表示可选字符串参数，默认是"…"
prev_show_always 是否显示“前一页”分页按钮布尔型，可选参数，默认为true，即显示“前一页”按钮
next_show_always 是否显示“下一页”分页按钮布尔型，可选参数，默认为true，即显示“下一页”按钮
callback 回调函数默认无执行效果

2.使用举例
Js代码
$("#Pagination").pagination(56, {
    num_edge_entries: 2,
    num_display_entries: 4,
    callback: pageselectCallback,
    items_per_page:1
});

这段代码表示的含义是：总共有56(maxentries)个列表项，首尾两侧分页显示2(num_edge_entries)个，连续分页主体数目显示4(num_display_entries)个，回调函数为pageselectCallback(callback)，每页显示的列表项为1(items_per_page)。您可以对照参数表修改配置这里的参数

例子：

<script src="js/jquery-1.2.6.pack.js" type="text/javascript"></script>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.pagination.js" type="text/javascript"></script>
<link href="js/pagination.css" rel="stylesheet" type="text/css" />


<script type="text/javascript">
	  
	   $(document).ready(function(){
		   $("#Pagination").pagination(100, {
                   callback: pageselectCallback,
                   prev_text: '<< 上一页',
                   next_text: '下一页 >>',
                   items_per_page:2,
		            num_display_entries:3,
		            current_page:1,
		            num_edge_entries:2
               });
	   });


	   //翻页响应
	   function pageselectCallback(page_id,jq) {
           alert(page_id);
       }

</script>
<hr/>
<div id="Pagination" class="flickr" style="text-align:left"></div>

例子：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<script type="text/javascript"
			src="../../../js/jquery-1.3.2.min.js"></script>
		<script type="text/javascript"
			src="http://localhost/dyw/js/page/jquery.pagination.js"></script>
	    <link href="http://localhost/dyw/js/page/pagination.css" rel="stylesheet" type="text/css" />
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

		<script type="text/javascript">
		/* P返回的是父窗口对象，也就是lhgdialog.html这个页面的window对象。
		   E调用lhgdialog.html页面的loadinndlg()函数，返回的就是窗口调用页面对象，也就是
		   加载lhgdialog.js这个页面的window对象。
		 */ 
		 
		// 注意！这行代码是每个内容页必须加的内容，否则无法正确显示。
		var P = window.parent, E = P.setDialog();
        $(document).ready(function(){
            $("#wip").html(E.fip);
            //启动遮罩层
            $("#loading").show();
        	//加载详情信息
        	loadHistory(0);  
        	
        	
        }); 
        
        
        //查询角色
		function loadHistory(pz) {
		$.ajax({type:"POST", url:E.fUrl+"admin/ajaxPageHistory.action",data:{sip:E.fip,p:(pz+1)}, beforeSend:function () {
			   //$("#QXdiv").html("<img src='"+E.fUrl+"js/image/loading.gif'/ title='\u6b63\u5728\u767b\u5f55,\u8bf7\u7a0d\u540e...'>&nbsp;Loading...");
		}, success:function (data) {
			   var objJson = eval("(" + data + ")"); 
			   //alert( eval("(" +objJson.datas+ ")").length);  
			   //总条数
			   $("#zts").html(objJson.zts);
			   //分页
			   
	           loadData(objJson.datas,objJson.zts,pz+1);
		}})};
		
		
		//装载数据
		function loadData(obj,pageCount,pageindx){
			//除了第一行删除id为t1表格所有行
			$("#t1 tr:not(:first)").remove();

			var data = eval("(" +obj+ ")");
			if(data.length>0){
			    //有数据
			    for(var i=0;i<data.length;i++){
					$("#t1 >tbody").append("<tr id=\"t1dt\"><td align=\"center\" height=\"25\" valign=\"middle\" bgcolor=\"#fffaee\">"+data[i].xh+"</td><td align=\"center\" valign=\"middle\">"+data[i].wdate+"</td><td align=\"center\" valign=\"middle\"><a href=\""+data[i].wurl+"\" target=\"_blank\">"+data[i].wurl+"</a></td><td align=\"center\" valign=\"middle\">"+data[i].wbrowser+"</td></tr>");    
			    }
			    
                $("#Pagination").pagination(pageCount, {
	                   callback: pageselectCallback,
	                   prev_text: '<<上一页',
	                   next_text: '下一页>>',
	                   items_per_page:10,
			           num_display_entries:4,
			           current_page:pageindx-1,
			           num_edge_entries:2
                });
               
			}else{
			   	//没有数据...
			   	 $("#t1No").show();
			}
			//数据装载完毕
			$("#loading").hide();
		}
    
       //翻页响应
	   function pageselectCallback(page_id,jq) {
	       //启动遮罩层
            $("#loading").show();
           loadHistory(page_id);
       }
		    
	</script>
	</head>

	<body>
	
	    <div id="loading"
			style="position: fixed !important; position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 999; background: #000 url(../../../js/image/o_loading.gif) no-repeat center center; opacity: 0.6; filter: alpha(opacity =60); font-size: 14px; line-height: 20px; display: none;"
			>
			<p id="loading-one"
				style="color: #fff; position: absolute; top: 50%; left: 50%; margin: 20px 0 0 -50px; padding: 3px 10px;">
				数据加载中...
			</p>
		</div>
	
	    <table style="font-size: 15px;" width="100%">
		    <tr >
				<td align="left" height="25" valign="middle" >
				IP:<label id="wip" style="color: red;"></label>共访问页面<label id="zts" style="color: red;"></label>次
				</td>
			</tr>
		</table>
		<table width="100%"
			style="border: #52aff4 1px solid; border-collapse: collapse; font-size: 12px;"
			rules="all" border="1" cellpadding="0" cellspacing="0"
			bordercolor="#52aff4" bgcolor="#ffffff" id="t1">
			<!--DWLayoutTable-->
			<!--DWLayoutTable-->
			<tbody>
			<tr bgcolor="#c6e6ff">
				<td width="44" height="30" align="center" valign="middle">
					序号
				</td>
				<td width="107" align="center" valign="middle">
					访问时间
				</td>
				<td width="362" align="center" valign="middle">
					访问页面
				</td>
				<td width="105" align="center" valign="middle">
					浏览器
				</td>
			</tr>

			<tr id="t1No" style="display: none;">
				<td align="center" height="25" valign="middle" colspan="4" bgcolor="#fffaee">
				没有访问记录...
				</td>
			</tr>
			</tbody>
		</table>
		
		<table style="font-size: 12px;" width="100%">
		    <tr >
				<td align="center" height="25" valign="middle" >
				<div id="Pagination" class="flickr" style="text-align:center;"></div>
				</td>
			</tr>
		</table>
	</body>
</html>

jquery_pagination_page.rar (4.9 KB)
下载次数: 121

分享到：

hibernate 原生态sql 别名查询取值 | spring filter 过滤器注入对象属性

2011-09-07 14:31
浏览 2928
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论