jquery分页对象使用示例
使用方法和相关参数如下：
displayId//默认值显示区域Id为pageBox，可以不填
pagesize//每页条数，默认是15条，可以不填
totalsize//总条数
curpage//当前页数
simple//默认是false，true没有上一页和下一页，
type//0默认走http跳转，1是jsp页面必须有pageCallBack(pageNum)函数,从1开始
url//链接地址，如果type出入1此处就可以不填
例子：Page._run({totalsize:300,curpage:11,type:1,simple:true}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Page对象</title>
<style>
.pageBox,.pageBox1{ text-align:center; height:25px; padding:15px 0;}
.pageBox .pages a.up,.pageBox .pages a.down{ color:#6eb4ea; text-decoration:none; border:1px solid #ffffff; background:none;}
.pageBox .pages a.else{ background:none; border:none;}
.pageBox .pages a{ padding:3px 7px; border:1px solid #f3f6f6; background:#fdfdfd; margin:0 5px; color:#999999;}
.pageBox .pages a:hover,.pageBox .pages a.hover{ background:#6eb4ea; border:1px solid #6eb4ea; color:#ffffff; text-decoration:none;padding:2px 7px; }
pageBox .pages span{ padding:3px 7px; color:#999999;}
.fiv_sep{ height:3px; float:left; width:100%; font-size:4px; line-height:2px;}
</style>
<script type="text/javascript" src="../jquery/jquery.js"></script><!--jquery支持1.4以上版本-->
</head>
<body>
<h1>Page</h1>
<div class="pageBox" id="pageBox"></div>
<script type="text/javascript">
var Page = {
/**
displayId//默认值显示区域Id为pageBox，可以不填
pagesize//每页条数，默认是15条，可以不填
totalsize//总条数
curpage//当前页数
simple//默认是false，true没有上一页和下一页，
type//0默认走http跳转，1是jsp页面必须有pageCallBack(pageNum)函数,从1开始
url//链接地址，如果type出入1此处就可以不填
例子：Page._run({totalsize:300,curpage:11,type:1,simple:true}
*/
_run:function(param){
var totalpages = 1,//总页数
displayId="#pageBox",//显示区域Id
pagesize=15,//每页条数
totalsize=0,//总条数
curpage=1,//当前页数
url="",//链接地址
type=0,//0默认走http跳转，1传入回调函数
simple=false;//简单版本，没有上一页和下一页
if(param.type!=undefined)type=param.type;
if(param.displayId!=undefined)displayId=param.displayId;
if(param.pagesize!=undefined)pagesize=param.pagesize;
if(param.totalsize!=undefined)totalsize=param.totalsize;
if(param.curpage!=undefined)curpage=param.curpage;
if(param.url!=undefined)url=param.url;
if(param.simple!=undefined)simple=param.simple;
if(url.indexOf("?")==-1){
url += "?1=1";
}
if(totalsize>0){
totalpages = Page._getTotalPages(totalsize,pagesize);
if(curpage>totalpages){curpage=totalpages;}//传入页数大于总页数，就按最后一页算
if(totalpages>1){
var firstPage= simple?"":Page._builderPageArea(type,"up",url,curpage-1,"上一页",false,displayId),
lastPage = simple?"":Page._builderPageArea(type,"down",url,parseInt(curpage)+1,"下一页",false,displayId),pages = new Array();
if(curpage<=4){//第一页 无上一页
if(curpage!=1){pages.push(firstPage);}
if(totalpages>5){//总页数超过5
for(var i=1;i<=5;i++){
if(curpage==i){
pages.push(Page._builderPageArea(type,"",url,i,i,true,displayId));
}else{
pages.push(Page._builderPageArea(type,"",url,i,i,false,displayId));
}
}
pages.push('<span>...</span>');
pages.push(Page._builderPageArea(type,"",url,totalpages,totalpages,false,displayId));
}else{//总页数<=5的，列1,2，3,4，5
for(var i=1;i<=totalpages;i++){
if(curpage==i){
pages.push(Page._builderPageArea(type,"",url,i,i,true,displayId));
}else{
pages.push(Page._builderPageArea(type,"",url,i,i,false,displayId));
}
}
}
if(curpage!=totalpages)pages.push(lastPage);
}else if(totalpages-curpage<=4){//最后一页 无下一页
if(curpage!=1){pages.push(firstPage);}
if(totalpages>5){//总页数超过5
pages.push(Page._builderPageArea(type,"",url,1,1,false,displayId));
pages.push('<span>...</span>');
for(var i=totalpages-4;i<=totalpages;i++){
if(curpage==i){
pages.push(Page._builderPageArea(type,"",url,i,i,true,displayId));
}else{
pages.push(Page._builderPageArea(type,"",url,i,i,false,displayId));
}
}
if(totalpages!=curpage) {pages.push(lastPage);}
}else{//总页数<=5的，列1,2，3,4，5
for(var i=1;i<=totalpages;i++){
if(curpage==i){
pages.push(Page._builderPageArea(type,"",url,i,i,true,displayId));
}else{
pages.push(Page._builderPageArea(type,"",url,i,i,false,displayId));
}
}
if(curpage!=totalpages)pages.push(lastPage);
}
}else{//有上一页和最后一页 且总页数肯定大于5
pages.push(firstPage);
pages.push(Page._builderPageArea(type,"",url,1,1,false,displayId));
pages.push('<span>...</span>');
for(var i=curpage-2;i<=curpage+2;i++){
if(curpage==i){
pages.push(Page._builderPageArea(type,"",url,i,i,true,displayId));
}else{
pages.push(Page._builderPageArea(type,"",url,i,i,false,displayId));
}
}
pages.push('<span>...</span>');
pages.push(Page._builderPageArea(type,"",url,totalpages,totalpages,false,displayId));
pages.push(lastPage);
}
var result = new Array();
result.push('<div class="pages">');
result.push(pages.join(''));
result.push('</div>');
$(displayId).html(result.join(''));
}
}else{
}
},
/**计算总页数*/
_getTotalPages:function(_totalsize,_pagesize){
if(_totalsize%_pagesize==0)
return _totalsize/_pagesize;
else
return parseInt(_totalsize/_pagesize)+1;
},
/**构造分页的每个页数区域*/
_builderPageArea:function(type,textType,url,page,text,_focus,_displayId){
var hrefStr,href= new Array();
if(type==0){
href.push(url);
href.push('&pagenum=');
href.push(page);
}else if(type==1){
href.push('javascript:void(0);pageCallBack(\\'');
href.push(page);
href.push('\\',\\'');
href.push(_displayId);
href.push('\\')');
}
hrefStr = href.join(''),result=new Array();
if(textType=='up'){
result.push('<a href="');
result.push(hrefStr);
result.push('" class="up">上一页</a>');
}else if(textType=='down'){
result.push('<a href="');
result.push(hrefStr);
result.push('" class="down">下一页</a>');
}else{
result.push('<a href="');
result.push(hrefStr);
if(_focus){
result.push('" style="background:#6EB4EA;color:#FFF;">');
}else{
result.push('">');
}
result.push(page);
result.push('</a>');
}
return result.join('');
}
};
Page._run({totalsize:100,curpage:1,pagesize:10});
</script>
</body>
</html>
相关推荐
-
基于jQuery的js分页代码
复制代码 代码如下: function pagerBar(dataCount,pageSize,serverUrl,contentPlace,pagerbarPlace,callBack){ this.dataCount = dataCount; this.pageSize = pageSize; this.serverUrl = serverUrl; this.contentPlace = $("#"+contentPlace); this.pagerbarPlace = $(&qu
-
基于jquery封装的一个js分页
复制代码 代码如下: (function ($) { var PageFunc = function PageFunc() { } $.PageFunc = function (Total, PageSize, curPageNum, FunUrl) { if (PageSize == "" || PageSize == null || PageSize == undefined) { PageSize = 10; } if (curPageNum == "" ||
-
JS+Ajax+Jquery实现页面无刷新分页以及分组 超强的实现第1/2页
复制代码 代码如下: <%@ Page language="c#" Codebehind="GroupText.aspx.cs" AutoEventWireup="false" Inherits="test1.GroupText" %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" > <HTML&g
-
jquery+ashx无刷新GridView数据显示插件(实现分页、排序、过滤功能)
理由:jquery简单,兼容性好且容易封装.废话不多说,马上开始我们的Jquery插件编写吧.应该有很多人写过类似的插件,我也是有些模仿flexGrid的形式. 需求:GridView显示数据,无刷新分页,无刷新排序,无刷新过滤(搜索数据),基于ASP.NET(我们这里有ashx一般处理文件来实现). 使用到技术:asp.net2.0, jquery,css 首先写的是jquery插件方面,使用的核心函数还是jquery的ajax函数,方便快捷. 复制代码 代码如下: $.ajax({ type
-
jQuery Pagination Ajax分页插件(分页切换时无刷新与延迟)中文翻译版
原项目地址:http://plugins.jquery.com/project/pagination版本:v1.2源文件下载:英文原版 或中文翻译修改版 一.相关demo 基本demo页面 Ajax demo页面 参数可编辑demo页面二.简介与说明 此jQuery插件为Ajax分页插件,一次性加载,故分页切换时无刷新与延迟,如果数据量较大不建议用此方法,因为加载会比较慢. 原插件CSS不太合理,使用浮动,故无法方便实现左右方向的定位,且未清除浮动,在中文修改版中我对其进行了优化,使其支持tex
-
用jQuery中的ajax分页实现代码
功能简介:主要功能就是分页显示数据了,可在配置文件中配置每页要显示的页码,可以做多条件联合查询,这里只是做一个简单的查询.欢迎拍砖,有问题的还望大虾们斧正哈.看看这个效果图,无刷新的噢!! 具体实现请看源码: 1.aspx页面 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AjaxPage.aspx.cs" Inherits="Measur
-
基于JQuery的Pager分页器实现代码
实例效果图如下 使用说明 需要使用jQuery库文件和JQuery Pager库文件(目前版本1.1) 素材准备 分页器CSS样式文件,可复制如下CSS样式,可命名为Pager.css 复制代码 代码如下: #pager ul.pages { display:block; border:none; text-transform:uppercase; font-size:10px; margin:10px 0 50px; padding:0; } #pager ul.pages li { list
-
jquery+json实现的搜索加分页效果
1.Web 里面有三个目录: 1.1 content.htm //这个文件直接运行就行 1.2 js //这里面有用到的几个js 文件,其中 以db 开头的就是数据源(就是json 串) 1.3 css //css 就不用说了 2. 直接运行 content.htm 就可以直接打开查看分页和搜索效果了 3. 原理很简单,只是用了javascript 的index 函数核心代码: 复制代码 代码如下: /* author: liulf function: var __db_cpcj=vCpcj;
-
基于Jquery实现表格动态分页实现代码
当页面点击分页图标时,程序会自动去后台获取对应页数的记录. 关键代码如下: 需要引入的css和js文件有: 复制代码 代码如下: <link rel="stylesheet" type="text/css" href="<%=basePath %>css/theme/default/css/jpage.css"></link> <link ID="skin" rel="sty
-
jQuery插件分享之分页插件jqPagination
使用方法: 添加 jQuery 类库.jqPagination 插件的 JS 和 CSS 文件 复制代码 代码如下: <link rel="stylesheet" href="jqpagination.css"/><script src="jquery-1.6.2.min.js"></script><script src="jquery.jqpagination.min.js">
-
jquery分页插件jpaginate在IE中不兼容问题
下了个分页插件用,网上下载下来的demo在各ie版本下有点差别,但是还是可以用. 但是在我的页面中则不能正常显示.可能是因为div嵌套过多或者position定位造成的. 我改了下源码基本可以在ie7,ie8,ie9正常显示.以下是部分源码.发现用别人的东西出了问题很难搞啊.关键是那个ie啊. 复制代码 代码如下: var bVer = navigator.appVersion; var ver ; if(bVer.indexOf('MSIE 7.0') > 0){ ver = "ie7&
-
使用PHP+JQuery+Ajax分页的实现
为了锻炼下JQuery,决定自己动手写写分页 最终的效果如图: 点击某个字母后,下方显示以该字母为首字母的所有词语: 分页显示,每页显示15个词语,每组页码有20个,1-20/20-40--- 首先是在PHP文件中的分页Pager的相关代码 复制代码 代码如下: public function searchWordsByInitial() { //从AJAX发出的URL中获得参数:用户点击的字母和点击的页码 $initial = htmlenti
-
基于jquery实现的表格分页实现代码
具体代码如下: 引用js和css文件有: 复制代码 代码如下: <link ID="skin" rel="stylesheet" type="text/css" href="css/config.css"> <script type="text/javascript" src="js/config.js"></script> <script ty
-
jquery.pagination +JSON 动态无刷新分页实现代码
aspx 页面: 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="SqlPage.aspx.cs" Inherits="SqlPage" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w
-
jQuery EasyUI API 中文文档 - Pagination分页
用 $.fn.pagination.defaults 重写了 defaults. 依赖 linkbutton 用法 复制代码 代码如下: <div id="pp" style="background:#efefef;border:1px solid #ccc;"></div> 复制代码 代码如下: $('#pp').pagination({ total:2000, pageSize:10 }); 特性 名称 类型 说明 默认值 total n
-
jquery.pagination.js 无刷新分页实现步骤分享
1.使用插件为 jquery.pagination.js ,如果没有这个js文件的话,我可以给发个. 首先引用 jquery.pagination.js (分页js),跟pagination.css(分页样式css). 2.页面js代码为 复制代码 代码如下: <script type="text/javascript"> var pageIndex = 0; //页面索引初始值 var pageSize = 15; //每页显示条数初始化,修改显示条数,修改这里即可 $(
-
php jquery 实现新闻标签分类与无刷新分页
现在jquery的应用越来越广泛了,在很多网站的新闻板块都实现了 标签分类 + 无刷新分页 的效果. 也自己尝试写了一个,效果图如下(样式可以按用户需求自己去整): 接下来详细介绍实现过程: 我一向是见招拆招的解决思路,这里需要运用到3个东西--标签页效果插件和分页插件,jquery的getJson请求. 因此我使用了jquery-ui插件,jquery-page插件,现提供下载地址: jquery_all.rar 里面包含了3个JS脚本文件和2个样式表:jquery-1.3.2.min.jsj
-
一款Jquery 分页插件的改造方法（服务器端分页）
分页几乎是每个外部程序必不可少的东西,在webform时代很多人都用过AspNetPager这个用户控件吧,用的人之多其实就在于它的优点:传给它几个参数就可以生成像样的分页,其实这个也是绝大多数程序员(包括我)的致命缺点:样式..,我对于咱们来说用尝试用CSS把一个模块调美观好看所花的时间远远超过了实现功能所需的时间- -! 现在越来越多做web的开始采用.NET MVC框架,抛开一切服务器控件,回归正宗的B/S编程,享受灵活控制好处之余,也得花费很多功夫,很多地方都得自己去实现,例如分页这样的
-
基于jQuery的实现简单的分页控件
1:效果图 2:素材 3:编码 3.1思考 需要做什么? 1:分页控件需要向后台发送请求,发送的参数包括当前页,每页显示数量,查询条件:并且获取数据加载到当前页面: 2:进行修改删除操作的时候能记住当前页: 3:查询后翻页的时候可以可以记住当前查询的条件 3.2实现 HTML 复制代码 代码如下: <!--存储数据的容器--> <div class="tableData"> </div> <!--分页控件显示--> <div cla
-
jquery pagination插件实现无刷新分页代码
先把要用到的文件依次进入进来: 复制代码 代码如下: <script src="common/jquery.js" type="text/javascript"></script> <script src="common/jquery.pagination.js" type="text/javascript"></script> <link href="commo
-
jQuery中jqGrid分页实现代码
(1)页面代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UT
-
jQuery客户端分页实例代码
复制代码 代码如下: <script src="/js/jquery-1.4.1.js" type="text/javascript"></script> <script type="text/javascript"> var pageindex = 1; var pagesize = 2; $(function () { previous(