自己写的一个jQuery分页插件
2014-03-07 11:02
661 查看
;(function($){ $.fn.extend({ pageList: function (json) { function PageList() { this.initHtml = ""; //初次加载后的Html this.num = 0; //页码个数 this.totalPageCount = 0;//总页数 this.size = 0;//每页数据条数 this.hiddenPosition = 3;//省略号的位置 this.fwNotNum = 2; //插件前面的非页码个数 this.fwNotNumHtml = "";//插件前面的非页码html this.backNotNumHtml = "";//插件后面的非页码html } PageList.prototype.init = function (objPageList, json) { var pageListFunction = this; objPageList.addClass("pageList"); if (json) { if (!json.total || isNaN(json.total)) { json.total = 1; // alert("分页插件total参数异常,插件加载失败"); //return; } if (!json.size || isNaN(json.size)) { json.size = 10; } if (!json.num || isNaN(json.num) || json.num < 10) { json.num = 10; } if(!json.ajax){ json.ajax=function(){}; } } var fwNotNumHtml = "<a class='pageList_FirstPage'><label>首页</label></a><a class='pageList_PrevPage'>上页</a>"; var backNotNumHtml = "<a class='pageList_NextPage'>下页</a><a class='pageList_LastPage'>末页</a><input class='jumpNum' type='text' value='' /><a class='jumpText' href='javascript:void(0)'>跳转</a>"; var html = ""; html += fwNotNumHtml; var totalPageCount = Math.ceil(json.total / json.size); if (totalPageCount <= json.num) { for (var i = 1; i <= totalPageCount; i++) { if (i == 1) { html += "<a class='pageList_Num pageList_Current'>" + i + "</a>"; continue; } html += "<a class='pageList_Num'>" + i + "</a>"; } } else { var hidden = json.num - pageListFunction.hiddenPosition; for (var i = 1; i <= totalPageCount; i++) { if (i == 1) { html += "<a class='pageList_Num pageList_Current'>" + i + "</a>"; continue; } if (i == hidden) { html += "<a class='pageList_Hidden'>...</a>"; break; } html += "<a class='pageList_Num'>" + i + "</a>"; } for (var j = pageListFunction.hiddenPosition - 1; j >= 0; j--) { html += "<a class='pageList_Num'>" + (totalPageCount - j) + "</a>"; } } html += backNotNumHtml; objPageList.html(html); pageListFunction.initHtml = html; pageListFunction.num = json.num; pageListFunction.size = json.size; pageListFunction.totalPageCount = totalPageCount; pageListFunction.fwNotNumHtml = fwNotNumHtml; pageListFunction.backNotNumHtml = backNotNumHtml; pageListFunction.ajax=json.ajax; } PageList.prototype.centerPage = function () { return Math.ceil(this.totalPageCount / 2); } PageList.prototype.limitData = function () { return this.totalPageCount - this.hiddenPosition - 1; } PageList.prototype.clickA = function (objA, objPageList) { var pageListFunction = this; var clickA = 0; if (objA.hasClass("pageList_Current") || objA.hasClass("pageList_Hidden")) { return; } else if (objA.hasClass("pageList_Num")) { clickA = parseInt(objA.html()); } else if (objA.is(".pageList_FirstPage")) { if (pageListFunction.getCurrentData(objPageList) == 1) return; clickA = 1; } else if (objA.is(".pageList_PrevPage")) { clickA = pageListFunction.getCurrentData(objPageList) - 1; if (clickA <= 0) return; } else if (objA.is(".pageList_NextPage")) { clickA = pageListFunction.getCurrentData(objPageList) + 1; if (clickA > pageListFunction.totalPageCount) return; } else if (objA.is(".pageList_LastPage")) { if (pageListFunction.getCurrentData(objPageList) == pageListFunction.totalPageCount) return; clickA = pageListFunction.totalPageCount; } else if (objA.is(".jumpText")||objA.is("input.jumpNum")) { var clickAtext = $(".jumpNum", objPageList).val(); if (clickAtext == "") return; clickA = parseInt(clickAtext); var currentA = pageListFunction.getCurrentData(objPageList); if (isNaN(clickA)) { return; } else if (clickA <=0) { return; } else if (clickA > pageListFunction.totalPageCount) { return; } else if (clickA == currentA) { return; } } pageListFunction.ajax(); pageListFunction.clickNum(clickA, objPageList); } PageList.prototype.getCurrentData = function (objPageList) { return parseInt($("a.pageList_Current",objPageList).html()); } PageList.prototype.getHiddenFwOrBackData=function(objPageList,type){//返回省略号前面或后面的值 if(type=="fw") return parseInt($("a.pageList_Hidden",objPageList).prev().html()); else if(type=="back") return parseInt($("a.pageList_Hidden", objPageList).next().html()); } PageList.prototype.hiddenFwOrBackHtml = function (type) {//返回省略号前后的htm页码的html var html = ""; if (type === "fw") {//省略号在前 for (var i = 1; i <= this.hiddenPosition; i++) { html += "<a class='pageList_Num'>" + i + "</a>"; } } else if (type === "back") {//省略号在后 for (var j = this.hiddenPosition - 1; j >= 0; j--) { html += "<a class='pageList_Num'>" + (this.totalPageCount - j) + "</a>"; } } return html; } PageList.prototype.addPageList_Current = function (clickNum, objPageList) { $("a.pageList_Num", objPageList).removeClass("pageList_Current").each(function () { if (parseInt($(this).html()) == clickNum) { $(this).addClass("pageList_Current"); } }); } PageList.prototype.getHiddenHtml = function () { return "<a class='pageList_Hidden'>...</a>"; }; PageList.prototype.newHtml = function (type, objPageList, clickNum) {//返回新的Html,只返回不操作 var pageListFunction = this; var html = ""; if (type == 1) html += pageListFunction.initHtml; else if (type == 2) { html += pageListFunction.fwNotNumHtml; //首页,第一页 html += pageListFunction.hiddenFwOrBackHtml("fw"); //省略号前的数 html += pageListFunction.getHiddenHtml(); //省略号 var start = pageListFunction.totalPageCount - (pageListFunction.num - pageListFunction.hiddenPosition - 1) + 1; for (var i = start; i <= pageListFunction.totalPageCount; i++) { html += "<a class='pageList_Num'>" + i + "</a>"; } html += pageListFunction.backNotNumHtml; } else if (type == 3) { clickNum += 1; html += pageListFunction.fwNotNumHtml; var start = clickNum - (pageListFunction.num - pageListFunction.hiddenPosition - 1) + 1; for (var i = start; i <= clickNum; i++) { html += "<a class='pageList_Num'>" + i + "</a>"; } html += pageListFunction.getHiddenHtml(); html += pageListFunction.hiddenFwOrBackHtml("back"); html += pageListFunction.backNotNumHtml; } else if (type == 4) { html += pageListFunction.fwNotNumHtml; html += pageListFunction.hiddenFwOrBackHtml("fw"); html += pageListFunction.getHiddenHtml(); clickNum -= 1; var end = pageListFunction.num - pageListFunction.hiddenPosition - 1 + clickNum - 1; for (var i = clickNum; i <= end; i++) { html += "<a class='pageList_Num'>" + i + "</a>"; } html += pageListFunction.backNotNumHtml; } return html; } PageList.prototype.clickNum = function (clickNum, objPageList) { var pageListFunction = this; var html = ""; if (pageListFunction.totalPageCount <= pageListFunction.num) { pageListFunction.addPageList_Current(clickNum, objPageList); return; } else if (clickNum <= 5) { html = pageListFunction.newHtml(1, objPageList); } else if (clickNum >= pageListFunction.limitData()) { html = pageListFunction.newHtml(2, objPageList); } else { if (clickNum < pageListFunction.centerPage()) html = pageListFunction.newHtml(3, objPageList, clickNum); else if (clickNum >= pageListFunction.centerPage()) html = pageListFunction.newHtml(4, objPageList, clickNum); } objPageList.html(html); pageListFunction.addPageList_Current(clickNum, objPageList); } var objPageList = $(this); var p = new PageList(); p.init(objPageList, json, p); objPageList.on("click", "a:not('.pageList_Hidden')", function () { p.clickA($(this), objPageList); }); objPageList.on("keyup","input.jumpNum",function(event){ if(event.which===13){ p.clickA($(this), objPageList); } }); } }); })(jQuery);
.pageList{ clear:both; overflow:hidden;} .pageList .pageList_Nums{ float:left;} .pageList a{border:1px solid #ccc; margin-left:10px; float:left; display:block; overflow:hidden; padding:3px; font-family:微软雅黑; font-size:12px; min-width:15px; text-align:center; cursor:pointer; height:20px; line-height:20px;} .pageList a:hover,.pageList_Current{ background-color:#278DE1;} .pageList a.pageList_Hidden{ border:none; cursor:default;} .pageList a.pageList_Hidden:hover{ background-color:transparent;} .pageList input.jumpNum{ width:30px; border:1px solid #8c8c8c; float:left; width:30px; height:20px; margin-left:5px; line-height:20px; padding:3px; text-align:center;} .pageList a.jumpText{ border:none;background:none; outline:none; margin-left:0;}
调用插件:
$(function(){ $("#pagelist").pageList({ total: 1021, num: 10, size: 8,ajax:function(){ $.ajax({ type: "POST", //dataType: "html", url: "", cache:false, //data: { pageStar: pageStar, pageEnd: pageEnd }, error: function () { }, success: function (data) {//alert("这里的ajax可以正常执行"); } }); } }); })
HTML代码:
<div id="pagelist"></div>
界面效果:
相关文章推荐
- wg_pagenation 1.1 自己写的一个分页插件_基于Jquery 20151008
- 分享一个自己动手写的jQuery分页插件
- 分享一个自己写的jquery分页插件
- 自己diy一个jquery分页插件
- 分享一个自己动手写的jQuery分页插件
- 从零开始搭建自己的网站十:jquery ias流式分页插件添加
- 自己在项目中写的一个Jquery插件和Jquery tab 功能
- 自己写一个jQuery垂直滚动条插件(panel)
- 一个简单的jQuery分页跳转插件
- 改写Jquery的一个分页插件
- [原创]jPagerBar1.2发布-jquery分页插件(一个适合Ajax+JSON+jQuery环境使用的多功能页码栏插件)(Demo、源文件下载已更新)
- 自定义 jQuery 插件, 自己开发的一个Demo
- jQuery分页插件jBootstrapPage,一个Bootstrap风格的分页插件
- jQuery分页插件jBootstrapPage,一个Bootstrap风格的分页插件
- 分享一个jQuery 客户端分页插件
- 自己制作的一个UBB发表情的jQuery插件。
- 自己编写JQuery扩展分页插件
- 一个非常简单的jQuery分页插件
- JavaScript 学习笔记之二:编写自己的jQuery扩展分页插件(分享yQuery)
- 自己写一个 jQuery 插件