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> */