默认生成的样式.自己可以调整.:
//html代码
<table id="commentTab" width="100%;"> </table> <div id="meneameFy"></div>
//分页控件输出以及判断的主要方法 function pageInit(s){ currsPage=s;//当前页码 (注意是传过来的) var totalPage = "${totalPage}"; //最大页码(从后台传递过来的) var grountCount = 9; //每组显示的个数 (可以自定义) var currsPageYM = currsPage+4; //页面显示的页码最大值 var strSpan = ""; //向页面输出值 if(totalPage < grountCount){ //最大页码小于每组的显示个数,直接输出所有页码 if(currsPage == 1){ strSpan = "<span class='disabled'> < </span>"; }else{ strSpan = "<a href='javascript:Page(1);'> < </a>"; } for(var j = totalPage;j>0;j--){ var bb = totalPage - j+1; if(bb == currsPage){ strSpan = strSpan+"<span class='current'>"+bb+"</span>"; }else{ strSpan = strSpan+"<a href='javascript:Page("+bb+");'>"+bb+"</a>"; } if(bb == totalPage){ break; } } if(currsPage == totalPage){ strSpan = strSpan+"<span class='disabled'> > </span>"; }else{ strSpan = strSpan+"<a href='javascript:Page("+totalPage+");'> > </a>"; } }else if(currsPageYM >= totalPage){ //页面显示的页码最大值大于或等于最大页码,及最后一组页码显示,做特殊处理 if(currsPage == 1){ strSpan = "<span class='disabled'> < </span>"; currsPageYM = grountCount; }else{ strSpan = "<a href='javascript:Page(1);'> < </a>"; } for(var k = grountCount;k>0;k--){ var bb = totalPage - k+1; if(bb == currsPage){ strSpan = strSpan+"<span class='current'>"+bb+"</span>"; }else{ strSpan = strSpan+"<a href='javascript:Page("+bb+");'>"+bb+"</a>"; } if(bb == totalPage){ break; } } if(currsPage == totalPage){ strSpan = strSpan+"<span class='disabled'> > </span>"; }else{ strSpan = strSpan+"<a href='javascript:Page("+totalPage+");'> > </a>"; } }else{ //页码逻辑正常显示处理 if(currsPage == 1){ strSpan = "<span class='disabled'> < </span>"; currsPageYM = grountCount; }else{ strSpan = "<a href='javascript:Page(1);'> < </a>"; } for(var i = grountCount;i>0;i--){ var bb = currsPageYM - i+1; if(bb == currsPage){ strSpan = strSpan+"<span class='current'>"+bb+"</span>"; }else{ strSpan = strSpan+"<a href='javascript:Page("+bb+");'>"+bb+"</a>"; } if(bb == totalPage){ break; } } if(currsPage == totalPage){ strSpan = strSpan+"<span class='disabled'> > </span>"; }else{ strSpan = strSpan+"<a href='javascript:Page("+totalPage+");'> > </a>"; } } document.getElementById("meneameFy").innerHTML=strSpan; }
//ajax分页获取数据方法 function Page(s){ jQuery("#commentTab tr").remove(); jQuery.post("getAllCommentProduct.action",{prodId:"${id}",pageNo:s},function(data){ pageInit(s); for(var i=0;i<data.rows.length;i++){ var ss= "<tr><th style='width:100px;'>评论昵称:</th><td>"+data.rows[i].nicheng+"</td></tr>" +"<tr class='capti'>" +"<th>评论内容:</th><td><div style='height:100px;width:800px;border:1px solid pink;'>"+data.rows[i].content+"</div><div style='float:right;'>"+data.rows[i].createTime+"</div></td>" +"</tr>"; jQuery(ss).appendTo(commentTab); } },"json"); }
//页面初始化加载 jQuery(function(){ <% String id=request.getParameter("id"); request.setAttribute("id", id); String totalPage=request.getParameter("totalPage"); request.setAttribute("totalPage", totalPage); String resultSize=request.getParameter("resultSize"); request.setAttribute("resultSize",resultSize); String pageNo = request.getParameter("pageNo"); request.setAttribute("pageNo", pageNo); %> pageInit(1);//页面加载初始化传入当前页码为1 Page(1);//获取第一页面的数据 });
分页控件的css代码
<style> div#meneameFy{margin:10px 150px;} div#meneameFy A { BORDER-RIGHT: #ff9600 1px solid; PADDING-RIGHT: 7px; BACKGROUND-POSITION: 50% bottom; BORDER-TOP: #ff9600 1px solid; PADDING-LEFT: 7px; BACKGROUND-IMAGE: url(meneame.jpg); PADDING-BOTTOM: 5px; BORDER-LEFT: #ff9600 1px solid; COLOR: #ff6500; MARGIN-RIGHT: 3px; PADDING-TOP: 5px; BORDER-BOTTOM: #ff9600 1px solid; TEXT-DECORATION: none } div#meneameFy A:hover { BORDER-RIGHT: #ff9600 1px solid; BORDER-TOP: #ff9600 1px solid; BACKGROUND-IMAGE: none; BORDER-LEFT: #ff9600 1px solid; COLOR: #ff6500; BORDER-BOTTOM: #ff9600 1px solid; BACKGROUND-COLOR: #ffc794 } div#meneameFy A:active { BORDER-RIGHT: #ff9600 1px solid; BORDER-TOP: #ff9600 1px solid; BACKGROUND-IMAGE: none; BORDER-LEFT: #ff9600 1px solid; COLOR: #ff6500; BORDER-BOTTOM: #ff9600 1px solid; BACKGROUND-COLOR: #ffc794 } div#meneameFy SPAN.current { BORDER-RIGHT: #ff6500 1px solid; PADDING-RIGHT: 7px; BORDER-TOP: #ff6500 1px solid; PADDING-LEFT: 7px; FONT-WEIGHT: bold; PADDING-BOTTOM: 5px; BORDER-LEFT: #ff6500 1px solid; COLOR: #ff6500; MARGIN-RIGHT: 3px; PADDING-TOP: 5px; BORDER-BOTTOM: #ff6500 1px solid; BACKGROUND-COLOR: #ffbe94 } div#meneameFy SPAN.disabled { BORDER-RIGHT: #ffe3c6 1px solid; PADDING-RIGHT: 7px; BORDER-TOP: #ffe3c6 1px solid; PADDING-LEFT: 7px; PADDING-BOTTOM: 5px; BORDER-LEFT: #ffe3c6 1px solid; COLOR: #ffe3c6; MARGIN-RIGHT: 3px; PADDING-TOP: 5px; BORDER-BOTTOM: #ffe3c6 1px solid } </style>
默认生成的样式.自己可以调整.
相关推荐
此文件为一个ASP.NET AJAX的服务器分页控件,提供了分页控件的程序集,以及少量的实例代码,其中还有不少BUG,希望贴出来跟大家一起研究一下,修改里面的不足之处。该控件的开发是出于本人额外兴趣。
php+ajax分页php+ajax分页php+ajax分页php+ajax分页php+ajax分页php+ajax分页php+ajax分页php+ajax分页php+ajax分页php+ajax分页php+ajax分页php+ajax分页php+ajax分页php+ajax分页php+ajax分页php+ajax分页php+ajax...
通用的Ajax 分页控件,适用于 .NET webform 和 mvc ,绝对的好用,通用。
ajax 分页ajax 分页ajax 分页
ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件
自己写的分页控件,在 http://download.csdn.net/source/3485783这个资源的基础上编译成DLL文件。同时支持MVC2 MVC3并有简单sample.非常简单。我相信大部分人能看懂我的sample 使用: 1、引用我的DLL 2、自己要坐...
C#编写的ajax无刷新分页控件。 NikeBoyAjaxPager就是新增的无刷新分页控件,同样支持任何数据控件,增加了一下属性: RequestPage:ajax请求页面,用于输入分页后的数据表格的html,这个页面需要额外添加,方法详见...
ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件...
NULL 博文链接:https://it-jiayuan.iteye.com/blog/1771807
这个前端分页主要用到kkpager插件,用kkpager分页封装
分页控件和AJAX控件 分页控件和AJAX控件
jquery 分页详细例子 ajax无刷新
功能基础,增,显,分页。适合初学者。 ajax+.net小例子 ajax+C#示例 ajax+.net 示例ajax+.net小例子 ajax+C#示例 ajax+.net 示例ajax+.net小例子 ajax+C#示例 ajax+.net 示例
基于jquery制作采用Twitter分页样式的ajax分页控件源码.zip
Ajax + JavaScript + MySQL 实现的Ajax分页功能
Ajax通用分页控件源码,可用于webform 或mvc 项目中,基于两种分页算法,快速方便无刷新分页
JQuery autocomplete ajax分页,对源码稍微修改了下
不错的ajax 分页 希望可以跟大家共享 一起学习!
其中包含6款Ajax分页Demo,文字分页、图片分页都可以。具有一定特效、很炫。基本已经满足各种web分页开发了。