ajax 分页控件，基于jquery
/*
分页插件，依赖jQuery库
version: 1.1.0
author: Harrison Cao
release date: 2013-09-23 相对 v1.0版本 修正了分页居中 使用方法：
1.初始化分页控件（可以在第一次ajax请求回调时根据返回的 总记录数（AllRows）和页面自定义属性（PageSize、CurrentPageIndex、SectionPagesCount）初始化控件）
调用PagerPlugin.Init(...)函数初始化,参数描述如下：
pageIndex, 第一个参数：传入当前页码索引
pageSize, 第二个参数：每页的记录条数
allRows, 第三个参数：总记录数，需要调用方在页面初始化时根据返回的总记录数对其赋值（只需在重置搜索结果时赋值，以下第五、六、七、八、九个参数的函数中不需要赋值）
sectionPagesCount, 第四个参数：每段显示的页码个数，如： 上一页 1 ... 7 8 9 10 11 12 ... 29下一页 此例 sectionPagesCount为6（即中间部分 页码 的显示个数）
embNextPageClickFunc, 第五个参数：单击下一页事件，指向函数，该函数只需完成ajax请求，根据返回的数据生成页面数据，并在回调函数结束时调用：PagerPlugin.CreatePager("pagerContainerID");pagerContainerID为要显示分页控件的DOM元素ID,函数中可以调用PagerPlugin.CurrentPageIndex等属性获取当前页码等数据
embLastPageClickFunc, 第六个参数：单击上一页事件，指向函数，该函数只需完成ajax请求，根据返回的数据生成页面数据，并在回调函数结束时调用：PagerPlugin.CreatePager("pagerContainerID");pagerContainerID为要显示分页控件的DOM元素ID,函数中可以调用PagerPlugin.CurrentPageIndex等属性获取当前页码等数据
embNextSectionClickFunc, 第七个参数：单击右边省略号事件，指向函数，该函数只需完成ajax请求，根据返回的数据生成页面数据，并在回调函数结束时调用：PagerPlugin.CreatePager("pagerContainerID");pagerContainerID为要显示分页控件的DOM元素ID,函数中可以调用PagerPlugin.CurrentPageIndex等属性获取当前页码等数据
embLastSectionClickFunc, 第八个参数：单击左边省略号事件，指向函数，该函数只需完成ajax请求，根据返回的数据生成页面数据，并在回调函数结束时调用：PagerPlugin.CreatePager("pagerContainerID");pagerContainerID为要显示分页控件的DOM元素ID,函数中可以调用PagerPlugin.CurrentPageIndex等属性获取当前页码等数据
embPageNumClickFunc 第九个参数：单击页码事件，指向函数，该函数只需完成ajax请求，根据返回的数据生成页面数据，并在回调函数结束时调用：PagerPlugin.CreatePager("pagerContainerID");pagerContainerID为要显示分页控件的DOM元素ID,函数中可以调用PagerPlugin.CurrentPageIndex等属性获取当前页码等数据 2.调用 PagerPlugin.CreatePager("divID") 在divID里创建分页控件 *3.简易初始化，在初始化期间各个页码单击事件如果没有特别的业务逻辑，可以使用如下函数初始化
调用PagerPlugin.SingleInit(...)函数初始化,参数描述如下：
pageIndex, 第一个参数：传入当前页码索引
pageSize, 第二个参数：每页的记录条数
allRows, 第三个参数：总记录数，需要调用方在页面初始化时根据返回的总记录数对其赋值（只需在重置搜索结果时赋值，以下第五、六、七、八、九个参数的函数中不需要赋值）
sectionPagesCount, 第四个参数：每段显示的页码个数，如： 上一页 1 ... 7 8 9 10 11 12 ... 29下一页 此例 sectionPagesCount为6（即中间部分 页码 的显示个数）
pageIndexChangedFunc 第五个参数：页码改变事件，指向函数，该函数只需完成ajax请求，根据返回的数据生成页面数据，并在回调函数结束时调用：PagerPlugin.CreatePager("pagerContainerID");pagerContainerID为要显示分页控件的DOM元素ID,函数中可以调用PagerPlugin.CurrentPageIndex等属性获取当前页码等数据 4.常用属性：
PagerPlugin.AllRows 获取或设置总记录数
PagerPlugin.PageSize 获取或设置每页记录数
PagerPlugin.CurrentPageIndex 获取或设置当前页索引
PagerPlugin.SectionPagesCount 获取或设置每段页码个数
PagerPlugin.AllPages() 获取总页数
*/
var PagerPlugin = {
PagerStyle: {
PagerNumNormalStyle: "width:23px; height:23px; line-height:23px; float:left; margin-left:10px; text-align:center; border:1px solid #C2D1EA; cursor:pointer;",
PagerNumActiveStyle: "width:23px; height:23px; line-height:23px; float:left; margin-left:10px; text-align:center; border:1px solid #6699ff; background-color:#6699ff; color:#FFFFFF;",
PagerNumMoveOverStyle: "width:23px; height:23px; line-height:23px; float:left; margin-left:10px; text-align:center; border:1px solid #6699ff; cursor:pointer;",
LastNextPagerNormalStyle: "float:left; width:50px; font-size:13px; line-height:23px; border:1px solid #C2D1EA; text-align:center; margin-left:10px; cursor:pointer;",
LastNextPagerMoveOverStyle: "float:left; width:50px; font-size:13px; line-height:23px; border:1px solid #6699ff; text-align:center; margin-left:10px; cursor:pointer;",
ALinkStyle: "text-decoration:none;color:#3669BA;",
ALinkActiveStyle: "text-decoration:none;font-weight:bold; color:#FFFFFF;",
Hide: "display:none;",
Display: "display:block"
},
ApiUrls: {
PageNumClickUrl: ""
},
AllRows: 100,
PageSize: 20,
CurrentPageIndex: 1,
SectionPagesCount: 6, EmbedNextPageClick: function (callbackEnd, args) {
callbackEnd(args);
}, _NextPageClick:
function (pageControllerID) {
this.EmbedNextPageClick(PagerPlugin.CreatePager, pageControllerID);
}, EmbedLastPageClick: function (callbackEnd, args) { callbackEnd(args); }, _LastPageClick:
function (pageControllerID) {
this.EmbedLastPageClick(PagerPlugin.CreatePager, pageControllerID);
}, EmbedNextSectionClick: function (callbackEnd, args) { callbackEnd(args); }, _NextSectionClick:
function (pageControllerID) {
this.EmbedNextSectionClick(PagerPlugin.CreatePager, pageControllerID);
}, EmbedLastSectionClick: function (callbackEnd, args) { callbackEnd(args); }, _LastSectionClick:
function (pageControllerID) {
this.EmbedLastSectionClick(PagerPlugin.CreatePager, pageControllerID);
}, EmbedPageNumClick: function (callbackEnd, args) { callbackEnd(args); }, _PageNumClick:
function (pageControllerID, pgIndex) {
this.EmbedPageNumClick(PagerPlugin.CreatePager, pageControllerID);
}, Init: function (
pageIndex,
pageSize,
allRows,
sectionPagesCount,
embNextPageClickFunc,
embLastPageClickFunc,
embNextSectionClickFunc,
embLastSectionClickFunc,
embPageNumClickFunc) {
this.CurrentPageIndex = pageIndex;
this.PageSize = pageSize;
this.AllRows = allRows;
this.SectionPagesCount = sectionPagesCount;
this.EmbedLastPageClick = embLastPageClickFunc;
this.EmbedLastSectionClick = embLastSectionClickFunc;
this.EmbedNextPageClick = embNextPageClickFunc;
this.EmbedNextSectionClick = embNextSectionClickFunc;
this.EmbedPageNumClick = embPageNumClickFunc;
}, SingleInit: function (
pageIndex,
pageSize,
allRows,
sectionPagesCount,
pageIndexChangedFunc) {
this.CurrentPageIndex = pageIndex;
this.PageSize = pageSize;
this.AllRows = allRows;
this.SectionPagesCount = sectionPagesCount;
this.EmbedLastPageClick = pageIndexChangedFunc;
this.EmbedLastSectionClick = pageIndexChangedFunc;
this.EmbedNextPageClick = pageIndexChangedFunc;
this.EmbedNextSectionClick = pageIndexChangedFunc;
this.EmbedPageNumClick = pageIndexChangedFunc;
}, AllPages:
function () {
var pgSize = parseInt((this.AllRows / this.PageSize).toString()) + (this.AllRows % this.PageSize > 0 ? 1 : 0);
return pgSize;
}, AllSections:
function () {
var currentSection = parseInt((this.AllPages() / this.SectionPagesCount).toString()) + ((this.AllPages() % this.SectionPagesCount) > 0 ? 1 : 0);
return currentSection;
}, CurrentSection:
function () {
var currentSection = parseInt((this.CurrentPageIndex / this.SectionPagesCount).toString()) + ((this.CurrentPageIndex % this.SectionPagesCount) > 0 ? 1 : 0);
return currentSection;
}, CreatePager:
function () {
var pagerRowWidth = 0; var pagerRowId = "";
if (arguments.length > 0) {
pagerRowId = arguments[0];
}
var currentActivedPageNum = this.CurrentPageIndex;
var htmlContent = "";
var pagerContent = "";
if (this.CurrentPageIndex > 1) { if (pagerRowId == "") {
pagerContent += "<div style='" + this.PagerStyle.LastNextPagerNormalStyle + "' onclick='PagerPlugin.LastPageClickEvt()'>";
}
else {
pagerContent += "<div style='" + this.PagerStyle.LastNextPagerNormalStyle + "' onclick='PagerPlugin.LastPageClickEvt(\"" + pagerRowId + "\")'>";
}
pagerContent += "<a href='#' target='_self' style='" + this.PagerStyle.ALinkStyle + "'>上一页</a>";
pagerContent += "</div>";
pagerRowWidth += (50 + 15); }
if (this.CurrentSection() > 1) {
var pageNumStyle = this.PagerStyle.PagerNumNormalStyle;
if (1 == currentActivedPageNum) {
pageNumStyle = this.PagerStyle.PagerNumActiveStyle;
}
if (pagerRowId == "") {
pagerContent += "<div style='" + pageNumStyle + "' onclick='PagerPlugin.PageNumClickEvt(1,\"" + pagerRowId + "\")'>";
}
else {
pagerContent += "<div style='" + pageNumStyle + "' onclick='PagerPlugin.PageNumClickEvt(1,\"" + pagerRowId + "\")'>";
}
pagerContent += "<a href='#' target='_self' style='" + this.PagerStyle.ALinkStyle + "'>1</a>";
pagerContent += "</div>";
pagerRowWidth += (23 + 13);
if (pagerRowId == "") {
pagerContent += "<div style='" + this.PagerStyle.PagerNumNormalStyle + "' onclick='PagerPlugin.LastSectionEvt()'>";
}
else {
pagerContent += "<div style='" + this.PagerStyle.PagerNumNormalStyle + "' onclick='PagerPlugin.LastSectionEvt(\"" + pagerRowId + "\")'>";
} pagerContent += "<a href='#' target='_self' style='" + this.PagerStyle.ALinkStyle + "'>...</a>";
pagerContent += "</div>";
pagerRowWidth += (23 + 15);
} var tmpCount = ((this.SectionPagesCount * this.CurrentSection()) < this.AllPages() ? (this.SectionPagesCount * this.CurrentSection()) : this.AllPages());
for (var i = this.SectionPagesCount * (this.CurrentSection() - 1) + 1; i <= tmpCount ; i++) {
var pageNumStyle = this.PagerStyle.PagerNumNormalStyle;
var aNumStyle = this.PagerStyle.ALinkStyle;
if (i == currentActivedPageNum) {
pageNumStyle = this.PagerStyle.PagerNumActiveStyle;
aNumStyle = this.PagerStyle.ALinkActiveStyle;
}
if (pagerRowId == "") {
pagerContent += "<div style='" + pageNumStyle + "' onclick='PagerPlugin.PageNumClickEvt(" + i.toString() + ",\"" + pagerRowId + "\")'>";
}
else {
pagerContent += "<div style='" + pageNumStyle + "' onclick='PagerPlugin.PageNumClickEvt(" + i.toString() + ",\"" + pagerRowId + "\")'>";
}
pagerContent += "<a href='#' target='_self' style='" + aNumStyle + "'>" + i.toString() + "</a>";
pagerContent += "</div>";
pagerRowWidth += (23 + 15);
} if (this.CurrentSection() < this.AllSections()) {
if (this.CurrentPageIndex + 1 < this.AllPages()) {
if (pagerRowId == "") {
pagerContent += "<div style='" + this.PagerStyle.PagerNumNormalStyle + "' onclick='PagerPlugin.NextSectionEvt()'>";
}
else {
pagerContent += "<div style='" + this.PagerStyle.PagerNumNormalStyle + "' onclick='PagerPlugin.NextSectionEvt(\"" + pagerRowId + "\")'>";
}
pagerContent += "<a href='#' target='_self' style='" + this.PagerStyle.ALinkStyle + "'>...</a>";
pagerContent += "</div>";
pagerRowWidth += (23 + 15);
}
var pageNumStyle = this.PagerStyle.PagerNumNormalStyle;
if (this.AllPages() == currentActivedPageNum) {
pageNumStyle = this.PagerStyle.PagerNumActiveStyle;
}
pagerContent += "<div style='" + pageNumStyle + "' onclick='PagerPlugin.PageNumClickEvt(" + this.AllPages() + ",\"" + pagerRowId + "\")'><a href='#' target='_self' style='" + this.PagerStyle.ALinkStyle + "'>" + this.AllPages() + "</a></div>";
pagerRowWidth += (23 + 15);
} if (this.CurrentPageIndex < this.AllPages()) {
if (pagerRowId == "") {
pagerContent += "<div style='" + this.PagerStyle.LastNextPagerNormalStyle + "' onclick='PagerPlugin.NextPageClickEvt()'>";
}
else {
pagerContent += "<div style='" + this.PagerStyle.LastNextPagerNormalStyle + "' onclick='PagerPlugin.NextPageClickEvt(\"" + pagerRowId + "\")'>";
}
pagerContent += "<a href='#' target='_self' style='" + this.PagerStyle.ALinkStyle + "'>下一页</a>";
pagerContent += "</div>";
pagerRowWidth += (50 + 15);
}
htmlContent += "<div id='divPagerRow' style='text-align:center; margin-left:auto; margin-right:auto; color:#333333; width:" + pagerRowWidth.toString() + "px;'>";
htmlContent += pagerContent;
htmlContent += "<div style='clear:both; height:0px;'></div></div>";
if (pagerRowId != "") {
jQuery("#" + pagerRowId.toString()).html("");
jQuery("#" + pagerRowId.toString()).html(htmlContent);
}
return htmlContent;
}, NextPageClickEvt:
function () {
if (this.CurrentPageIndex < this.AllPages()) {
this.CurrentPageIndex = this.CurrentPageIndex + 1;
} var args = arguments;
this._NextPageClick(args[0]);
}, LastPageClickEvt:
function () {
if (this.CurrentPageIndex > 1) {
this.CurrentPageIndex = this.CurrentPageIndex - 1;
} var args = arguments;
this._LastPageClick(args[0]);
}, NextSectionEvt:
function () {
if (this.CurrentSection() < this.AllSections()) {
this.CurrentPageIndex = this.CurrentSection() * this.SectionPagesCount + 1;
} var args = arguments;
this._NextSectionClick(args[0]);
}, LastSectionEvt:
function () {
if (this.CurrentSection() > 1) {
this.CurrentPageIndex = (this.CurrentSection() - 2) * this.SectionPagesCount + 1;
} var args = arguments;
this._LastSectionClick(args[0]);
}, PageNumClickEvt:
function (pgIndex, pgRowId) {
this.CurrentPageIndex = pgIndex; var args = pgRowId;
this._PageNumClick(pgRowId, pgIndex);
}
}; /*==================以下为示例代码================================*/
/* JS code: $(
function () {
PagerPlugin.Init(2, 20, 568, 6,
function () {
//alert("NextPageClick");
//arguments[0].call(PagerPlugin, arguments[1]);
PagerPlugin.CreatePager("divTest");//在ajax请求的回调函数中调用
},
function () {
//alert("LastPageClick");
//arguments[0].call(PagerPlugin, arguments[1]);
PagerPlugin.CreatePager("divTest");//在ajax请求的回调函数中调用
},
function () {
//alert("NextSectionClick");
//arguments[0].call(PagerPlugin, arguments[1]);
PagerPlugin.CreatePager("divTest");//在ajax请求的回调函数中调用
},
function () {
//alert("LastSectionClick");
//arguments[0].call(PagerPlugin, arguments[1]);
PagerPlugin.CreatePager("divTest");//在ajax请求的回调函数中调用
},
function () {
//alert("PageNumClick");
//arguments[0].call(PagerPlugin, arguments[1]);
PagerPlugin.CreatePager("divTest");//在ajax请求的回调函数中调用
}); PagerPlugin.CreatePager("divTest");
}
); 简易初始化：
$(
function () {
PagerPlugin.SingleInit(2, 20, 568, 6,
function () {
//alert("NextPageClick");
//arguments[0].call(PagerPlugin, arguments[1]);
alert(PagerPlugin.CurrentPageIndex);//获取当前页码
PagerPlugin.CreatePager("divTest");//在ajax请求的回调函数中调用
}); PagerPlugin.CreatePager("divTest");
}
); html code: <div id="divTest"></div>
*/
ajax 分页控件，基于jquery的更多相关文章
- jQuery Pagination Plugin ajax分页控件
<html> <body> <div id="datagrid"> </div> <div id="paginati ...
- 自定义分页控件-基于Zhifeiya的分页控件改版
基于Zhifeiya的分页控件改版的分页. html显示代码: <div class="pagelist"> {{.pagerHtml}} </div> c ...
- 基于jquery扩展漂亮的分页控件（ajax）
分页控件式大家在熟悉不过的控件,很多情况下都需要使用到分页控件来完成列表数据加载操作,在很多分页控件中有的编写麻烦,有的应用扩展比较复杂,有的分页控件样式比较丑陋,有的分页控件用户体验操作比较简单等等 ...
- 基于avalon+jquery做的bootstrap分页控件
刚开始学习avalon,项目需要就尝试写了个分页控件Pager.js:基于BootStrap样式这个大家都很熟悉 在这里推荐下国产前端神器avalon:确实好用,帮我解决了很多前端问题. 不多说了,代 ...
- 基于Bootstrap仿淘宝分页控件实现
.header { cursor: pointer } p { margin: 3px 6px } th { background: lightblue; width: 20% } table { t ...
- jquery 分页控件2
jquery 分页控件(二) 上一章主要是关于分页控件的原理,代码也没有重构.在这一章会附上小插件的下载链接,插件主要就是重构逻辑部分,具体可以下载源文件看下,源代码也有注释.为了测试这个插件是能用的 ...
- MVC4 5分页控件，支持Ajax AjaxOption支持
MVC4 5分页控件,支持Ajax AjaxOption支持 /// <summary> /// MVC4 5分页控件,支持Ajax AjaxOption支持 beta 1.0 /// 用 ...
- 基于存储过程的MVC开源分页控件--LYB.NET.SPPager
摘要 现在基于ASP.NET MVC的分页控件我想大家都不陌生了,百度一下一大箩筐.其中有不少精品,陕北吴旗娃杨涛大哥做的分页控件MVCPager(http://www.webdiyer.com/)算 ...
- jquery 分页控件(二)
上一章主要是关于分页控件的原理,代码也没有重构.在这一章会附上小插件的下载链接,插件主要就是重构逻辑部分,具体可以下载源文件看下,源代码也有注释.为了测试这个插件是能用的,我弄了个简单的asp.net ...
随机推荐
- Valgrind 安装与使用
调不尽的内存泄漏,用不完的Valgrind Valgrind 安装 1. 到www.valgrind.org下载最新版valgrind-3.2.3.tar.bz2 2. 解压安装包:tar –jxvf ...
- CF 19D Points 【线段树+平衡树】
在平面上进行三种操作: 1.add x y:在平面上添加一个点(x,y) 2.remove x y:将平面上的点(x,y)删除 3.find x y:在平面上寻找一个点,使这个点的横坐标大于x,纵坐标 ...
- Android Studio学习随笔-移动动画的实现
在上一篇博客我已经讲述了三种事件的实现方法,而现在我用复用方法来实现控件的自动移动,当然要实现控件的移动,先得在activity_main.xml文件中放置一个控件,此处我放置的是一个button控件 ...
- linux命令行计算器 <转>
转自 http://blog.chinaunix.net/uid-26959241-id-3207711.html 详细文档请 man bc 在windows下,大家都知道直接运行calc,(c:\w ...
- 【开源java游戏框架libgdx专题】-11-核心库-演员类
演员类,又称为Actor类,是libgdx开发中最基本的元素,可以被继承. 演员类,从OpenGL类的角度来理解,可以称为一个二维场景节点.它本身具有位置(postion).边界矩形(类似Retang ...
- asp.net，mvc4，mysql数据库，Ef遇到问题集合
asp.net mvc mysql数据库,在我一个新手自学MVC4时遇到如下的问题,一一解决掉的方法记录如下方便自己日后查看,也为了方便一些像我一样的新手遇到如下问题时,提供参考 问题一: 解决办 ...
- MemCachedClient数据写入的三个方法
set方法 1 将数据保存到cache服务器,如果保存成功则返回true 2 如果cache服务器存在同样的key,则替换之 3 set有5个重载方法,key和value是必须的参数,还有过期时间,h ...
- cocoapods安装失败
ERROR: While executing gem ... (Gem::FilePermissionError) You don't have write permissions for the ...
- 重新开始学习javase_类再生（类的合成和继承）
一.合成在新类里简单地创建原有类的对象.我们把这种方法叫作“合成” 为进行合成,我们只需在新类里简单地置入对象句柄即可.举个例子来说,假定需要在一个对象里容纳几个 String对象.两种基本数据类型以 ...
- Java多线程和线程池
转自:http://blog.csdn.net/u013142781/article/details/51387749 1.为什么要使用线程池 在Java中,如果每个请求到达就创建一个新线程,开销是相 ...