首页 > 代码库 > 分页插件
分页插件
//版本1.4.7 //作者:聂未 不是楼主 ; (function ($, window, document) { $.fn.extend({ paging: function (options) { //默认参数 var defaults = { total: 0, //全部页数 showPage: 9, //显示的页数 height: 30, //高 width: 8, //宽 jumpInputWidth: 60, //跳转输入框的宽 fontFamily: "微软雅黑", //字体 fontSize: 12, //字体大小 currentFontSize: 12, //当前选中页的字体大小 fontWeight: 400, //字体宽度 currentFontWeight: 400, //当前选中页的字体粗细 centerFontColor: "#000", //中间字体颜色 otherFontColor: "#000", //两边字体颜色 centerFontHoverColor: "red", //中间鼠标悬浮的字体颜色 otherFontHoverColor: "red", //两边鼠标悬浮的字体颜色 currentFontColor: "red", //当前选中页的字体颜色 jumpFontColor: "#000", //跳转内部标签的字体颜色 jumpFontHoverColor: "red", // 跳转内部标签的悬浮字体颜色 currentPage: 1, //当前页 centerBgColor: "#b6ff00", //中间页数按钮的底色 centerHoverBgColor: "", //中间鼠标悬浮的的底色 otherBgColor: "#b6ff00", //两边按钮的底色 otherHoverBgColor: "", //两边鼠标悬浮的背景颜色 jumpBgColor: "#b6ff00", //跳转a标签按钮的背景色 jumpHoverBgColor: "", //跳转a标签背景的悬浮背景色 currentBgColor: "#73ccfd", //当前选中页的底色 centerBorder: "1px solid green", //中间按钮的边框 otherBorder: "1px solid green", //两边按钮的边框 centerHoverBorder: "", //中间按钮悬浮边框 otherHoverBorder: "", //两边按钮悬浮边框 jumpBorder: "1px solid green", //跳转内标签的边框 jumpHoverBorder: "", //跳转内标签的悬浮边框 currentBorder: "", //当前选中页的边框 showJump: false, //是否显示跳转功能 transition: "initial", //效果延迟 gapWidth: 2, //间隙宽度 cormer: 0, //按钮的边角曲度 beforeBtnString: "上一页", //上一页按钮内显示的文字 nextBtnString: "下一页", //下一页按钮内显示的文字 firstBtnString: "首页", //首页按钮内显示的内容 lastBtnString: "尾页", //尾页按钮内显示的内容 jumpBtnString: "跳转", //跳转按钮的显示内容 submitStyle: "ajax", //点击按钮后的提交方式,有a标签的href提交和ajax异步提交两种选择,滚动显示方式只支持ajax方式 ajaxSubmitType: "post", //注明ajax是通过get方式访问还是post方式访问 idParameter: "pageId", //传到后台的当前页的id的参数名,这个传值会自动添加在href或ajax的url末尾 url: "/Home/List/", //需要提交的目标控制器,如"/Home/List/"或"/Home/List?name=‘张三‘&password=‘123456‘" limit: 5000, //设置滚动显示方式的极限值,大于则自动切换无滚动模式 animation: true, //是否是滚动动画方式呈现 false为精简方式呈现 页数大于limit时无论怎么设置自动默认为false ajaxData: {}, //ajax方式传值时的附加传值,要传的参数放在这里面,页面参数只要指定idParamemeter就好,会自动添加,该参数只有在ajax方式下有用 ajaxDataType: "json", //发生ajax请求时,dataType参数值,如跨域时为‘jsonp‘ jsonpCBName: "jsonp_cb", //跨域请求时的回调函数名,ajaxDataType为jsonp时有效 firstAjaxSubmit: true, //表示初始化时是否自动请求一次,用以获得total,currentPage等参数 beforeAjaxSubmit: function () { }, //ajax模式下,在发出请求之前的操作函数,重绘插件可使用此参数 ajaxSubmitBack: function (data) { }, //用于ajax返回的数据的操作,回调函数,data为服务器返回数据 isNewDraw: false, //插件是否是由重绘函数再次生成 simpleType: 0 // 精简模式可选0和1两种 } //将默认的参数对象和传进来的参数对象合并在一起 var opts = $.extend(defaults, options); /*********************定义全API方法开始*************************/ //全局API对象 PageAPI = {}; //API 获取当前页 PageAPI.GetCurrentPage = function () { return opts.currentPage; } //API 获取总页数 PageAPI.GetTotalPage = function () { return opts.total; } //API 向ajaxData增加或替换参数,传入json对象 PageAPI.AddAjaxData = http://www.mamicode.com/function (json) {"ajax" && (opts.ajaxData = $.extend(false, opts.ajaxData, json)); } //API 完全替换ajaxData附带传参对象 PageAPI.ReplaceAjaxData = http://www.mamicode.com/function (json) {"ajax" && (opts.ajaxData = http://www.mamicode.com/json);"ajax") return opts.ajaxData; } //API 更改请求url PageAPI.SetRequestUrl = function (url) { opts.url = url; if (opts.submitStyle == "href") setHref(); } ////隐藏首页和上一页标签 //PageAPI.HiddenFirst = function (type) { // if (Number(type) == 0) // this.find(".otherBtns").eq(0).hide(); // else // this.find(".otherBtns").eq(0).show(); //} ////隐藏下一页和尾页标签 //PageAPI.HiddenLast = function (type) { // if (Number(type) == 0) // this.find(".otherBtns").eq(1).hide(); // else // this.find(".otherBtns").eq(1).show(); //} //API 插件外主动执行请求 PageAPI.AjaxSubmit = function () { if (opts.submitStyle == "ajax") { //请求预处理函数 opts.beforeAjaxSubmit(); var ajax_param = { url: opts.url, type: opts.ajaxSubmitType, data: opts.ajaxData, dataType: opts.ajaxDataType, success: function (data) { if (!data.total || !data.currentPage) { data.total = 1; data.currentPage = 1; } draw(data.total, data.currentPage); opts.ajaxSubmitBack(data); } }; opts.ajaxDataType == "jsonp" && (ajax_param[‘jsonpCallback‘] = opts.jsonpCBName); //执行主动请求 $.ajax(ajax_param); } } //API 表示当前插件已经初始化结束 PageAPI.IsDone = function () { return true; } /*********************定义全API方法结束*************************/ //ajax模式为total未指定值时,通过请求赋值 if (opts.firstAjaxSubmit && Number(opts.total) <= 0 && opts.submitStyle == "ajax") { //将页码idParameter添加到ajaxData末尾一起发送 opts.ajaxData[opts.idParameter] = opts.currentPage; //预提交处理函数 opts.beforeAjaxSubmit(); var ajax_param = { url: opts.url, type: opts.ajaxSubmitType, data: opts.ajaxData, async: false, dataType: opts.ajaxDataType, success: function (json) { json.total != null && (opts.total = Number(json.total)); json.currentPage != null && (opts.currentPage = Number(json.currentPage)); opts.ajaxSubmitBack(json); opts.firstAjaxSubmit = false; } }; opts.ajaxDataType == "jsonp" && (ajax_param[‘jsonpCallback‘] = opts.jsonpCBName); //第一次请求 $.ajax(ajax_param); } //为参数调整格式 opts.total = parseInt(opts.total, 10); opts.showPage = parseInt(opts.showPage, 10); opts.currentPage = parseInt(opts.currentPage, 10); opts.height = parseInt(opts.height, 10); opts.width = parseInt(opts.width, 10); //为其增加一个class名 this.addClass("paging"); //目标元素命名 var $this = this; //防止页数过多造成的卡顿 if (opts.total > opts.limit) opts.animation = false; //浏览器兼容 //$("body").css({ "padding": 0, "margin": 0 }); //return this.each(function () { var first = 1; //中间显示页的起始位置,初始为1 var middle = Math.ceil(opts.showPage / 2); //向上取整,获得中间数,用以后面计算出需要滚动的页数 var last = opts.showPage; //中间显示页的终止位置,初始为显示页的长度 var slideBool = true; //用于防止在动画过程中发生的点击情况 true为可以点击 var initial = true; //表示是否是首次呈现,需要初始化否 var jumpClick = 0; //用来判断是否点击了跳转按钮,用于精简模式 var oldShowPage = opts.showPage; //因为opts.showPage会随total而改变,而重绘需要再一次使用原showPage参数,故在此保存 var oldHeight = opts.height; //因为opts.height会随total而改变,而重绘需要再一次使用原height参数,故在此保存 var poleClick = 0; //不为0时代表点击了首页或尾页按钮 //获取href访问方式时的连接字符 function getConnect() { var connect = ""; if (opts.url.indexOf("?") == -1) connect = "?"; else connect = "&"; return connect; } //设置禁止在ie下选中该div下的文本 $this.attr({ "onselectstart": "return false" }); //初始化两侧按钮 $this.append(‘<div class="otherBtns"><a value="http://www.mamicode.com/首页">‘ + opts.firstBtnString + ‘</a><a value="http://www.mamicode.com/上一页">‘ + opts.beforeBtnString + ‘</a></div><div class="centerBtns"><ul></ul></div><div class="otherBtns"><a value="http://www.mamicode.com/下一页">‘ + opts.nextBtnString + ‘</a><a value="http://www.mamicode.com/尾页">‘ + opts.lastBtnString + ‘</a></div><div class="jumpBtns"><input type="text" class="jump_input" data="" /><a class="jump_a" data="http://www.mamicode.com/0">‘ + opts.jumpBtnString + ‘</a></div>‘); //设置跳转div是否隐藏 if (!opts.showJump) { $this.find(".jumpBtns").hide(); } //将两侧内容为空的按钮删除掉 $this.find(".otherBtns a").each(function (index, element) { if (!$(element).text().replace(/\s/g, "")) $(element).remove(); }); //显示页超出总页数,则等于总页数 if (opts.showPage > opts.total) opts.showPage = opts.total; //初始化中间页码按钮 if (opts.animation) { //滚动方式 for (var i = 1; i <= opts.total; i++) { $this.find(".centerBtns ul").append(‘<li><a value=http://www.mamicode.com/‘ + i + ‘>‘ + i + ‘‘);".centerBtns ul").append(‘<li><a value=http://www.mamicode.com/‘ + i + ‘>‘ + i + ‘‘);".centerBtns ul").append(‘<li><a value=http://www.mamicode.com/‘ + i + ‘>····‘);".centerBtns ul").append(‘<li><a value=http://www.mamicode.com/‘ + i + ‘>‘ + i + ‘‘);".centerBtns ul").append(‘<li><a value=http://www.mamicode.com/‘ + opts.total + ‘>‘ + opts.total + ‘‘);".centerBtns ul").append(‘<li><a value=http://www.mamicode.com/‘ + i + ‘>‘ + i + ‘‘);"font-size": opts.fontSize + "px", "font-family": opts.fontFamily, "font-weight": opts.fontWeight }); //设置所有a标签的共有属性 $this.find("a").css({ "padding": "0 " + opts.width + "px", "float": "left", "display": "block", "height": opts.height + "px", "line-height": opts.height + "px", "text-align": "center", "cursor": "pointer", "border-radius": opts.cormer + "px", "text-decoration": "none", "user-select": "none", "-ms-user-select": "none", "transition": opts.transition, "-moz-transition": "none", "-webkit-transition": opts.transition, "-o-transition": opts.transition }); //去除火狐浏览器的transition样式 if (/mozilla/.test(navigator.userAgent.toLowerCase()) && !/(compatible|webkit)/.test(navigator.userAgent.toLowerCase())) { $this.find("a").css("transition", "none"); } //以下是中间div内的a标签的设置 $this.find(".centerBtns a").css({ "background-color": opts.centerBgColor, "color": opts.centerFontColor, "border": opts.centerBorder, "width": opts.simpleType == 1 ? opts.total.toString().length * 7 + "px" : parseInt($this.find(".centerBtns a").last().css("width"), 10) + "px" }).hover(function () { if (!!opts.centerFontHoverColor.replace(/\s/g, "") && $(this).attr("value") != opts.currentPage) $(this).css({ "color": opts.centerFontHoverColor }); if (!!opts.centerHoverBgColor.replace(/\s/g, "") && $(this).attr("value") != opts.currentPage) $(this).css({ "background-color": opts.centerHoverBgColor }); if (!!opts.centerHoverBorder.replace(/\s/g, "") && $(this).attr("value") != opts.currentPage) $(this).css({ "border": opts.centerHoverBorder }); }, function () { if ($(this).attr("value") != opts.currentPage && !!opts.centerFontColor.replace(/\s/g, "")) $(this).css({ "color": opts.centerFontColor }); if ($(this).attr("value") != opts.currentPage && !!opts.centerBgColor.replace(/\s/g, "")) $(this).css({ "background-color": opts.centerBgColor }); if (!!opts.centerBorder.replace(/\s/g, "") && $(this).attr("value") != opts.currentPage) $(this).css({ "border": opts.centerBorder }); }).each(function (index, element) { ////设置当前页的样式 if (parseInt($(element).attr("value"), 10) == opts.currentPage) { if (!!opts.currentFontColor.replace(/\s/g, "")) $(element).css({ "color": opts.currentFontColor.replace(/\s/g, "") }); if (!!opts.currentBgColor.replace(/\s/g, "")) $(element).css({ "background-color": opts.currentBgColor }); if (!!opts.currentBorder.replace(/\s/g, "")) $(element).css({ "border": opts.currentBorder }); if (!!opts.currentFontSize) $(element).css({ "font-size": opts.currentFontSize + "px" }); if (!!opts.currentFontWeight) $(element).css({ "font-weight": opts.currentFontWeight }); } //如果访问方式是href.并且是滚动模式 if (opts.submitStyle == "href" && opts.animation) { $(element).prop({ "href": opts.url + getConnect() + opts.idParameter + "=" + $(element).attr("value") }); } //注册点击事件 $(element).click(function () { //首页和末页左右两侧按钮的cursor if ((opts.isNewDraw && opts.currentPage == 1) || ($(element).attr("value") == "1" && opts.total > 1 && opts.submitStyle == "ajax" && !opts.isNewDraw) || (opts.currentPage == 1 && opts.submitStyle == "href")) { $this.find(".otherBtns a").each(function (index, item_other) { if ($(item_other).attr("value") == "首页" || $(item_other).attr("value") == "上一页") { $(item_other).css({ "cursor": "not-allowed" }); } else { $(item_other).css({ "cursor": "pointer" }); } }); } else if ((opts.isNewDraw && opts.currentPage == opts.total) || ($(element).attr("value") == opts.total && opts.total != 1 && opts.submitStyle == "ajax" && !opts.isNewDraw) || (opts.currentPage == opts.total && opts.submitStyle == "href")) { $this.find(".otherBtns a").each(function (index, item_other) { if ($(item_other).attr("value") == "尾页" || $(item_other).attr("value") == "下一页") { $(item_other).css({ "cursor": "not-allowed" }); } else { $(item_other).css({ "cursor": "pointer" }); } }); } else if ((opts.simpleType == 1 && $this.find(".jumpBtns>input").val() == opts.total && parseInt($this.find(".jump_a").attr("data")) < jumpClick) || (opts.simpleType == 1 && poleClick == opts.total)) { $this.find(".otherBtns a").each(function (index, item_other) { if ($(item_other).attr("value") == "尾页" || $(item_other).attr("value") == "下一页") { $(item_other).css({ "cursor": "not-allowed" }); } else { $(item_other).css({ "cursor": "pointer" }); } }); } else if ((opts.simpleType == 1 && $this.find(".jumpBtns>input").val() == 1 && parseInt($this.find(".jump_a").attr("data")) < jumpClick) || (opts.simpleType == 1 && poleClick == 1)) { $this.find(".otherBtns a").each(function (index, item_other) { if ($(item_other).attr("value") == "首页" || $(item_other).attr("value") == "上一页") { $(item_other).css({ "cursor": "not-allowed" }); } else { $(item_other).css({ "cursor": "pointer" }); } }); } else if (opts.total != 0 && opts.total != 1) { $this.find(".otherBtns a").css({ "cursor": "pointer" }); } //重绘插件正常化 opts.isNewDraw = false; //中间页码 if (!opts.animation) { //非滚动方式的显示 var clickPage;//点击页码 if (initial) clickPage = opts.currentPage; else if (poleClick != 0) { clickPage = poleClick; poleClick = 0; } else if (parseInt($this.find(".jump_a").attr("data")) < jumpClick) { clickPage = parseInt($this.find(".jumpBtns>input").val()); $this.find(".jump_a").attr({ "data": jumpClick }); } else clickPage = parseInt($(element).attr("value"), 10); //var clickPage = parseInt($(element).attr("value"), 10); //点击页码 var refresh = clickPage - middle; //判断是否刷新的先决条件 //满足条件就刷新分页 if (refresh > 0 && opts.showPage < opts.total) { var newClickPage; if (opts.showPage % 2 != 0) newClickPage = opts.total - (middle - 1); else newClickPage = opts.total - middle; for (var i = 0; i < opts.showPage; i++) { if (clickPage < newClickPage) { switch (i) { case 0: if (opts.simpleType == 1) { var pageIndex = clickPage - (middle - i - 1); $this.find(".centerBtns a").eq(i).text(pageIndex); $this.find(".centerBtns a").eq(i).attr({ "value": pageIndex }); if (opts.submitStyle == "href" && initial) $this.find(".centerBtns a").eq(i).attr({ "href": opts.url + getConnect() + opts.idParameter + "=" + pageIndex }); } else { $this.find(".centerBtns a").eq(i).text(1); $this.find(".centerBtns a").eq(i).attr({ "value": 1 }); if (opts.submitStyle == "href" && initial) $this.find(".centerBtns a").eq(i).attr({ "href": opts.url + getConnect() + opts.idParameter + "=" + 1 }); } break; case 1: if (opts.simpleType == 1) { var pageIndex = clickPage - (middle - i - 1); $this.find(".centerBtns a").eq(i).text(pageIndex); $this.find(".centerBtns a").eq(i).attr({ "value": pageIndex }); if (opts.submitStyle == "href" && initial) $this.find(".centerBtns a").eq(i).attr({ "href": opts.url + getConnect() + opts.idParameter + "=" + pageIndex }); } else { $this.find(".centerBtns a").eq(i).text("····"); var pageIndex = clickPage - (middle - i - 1); $this.find(".centerBtns a").eq(i).attr({ "value": pageIndex }); if (opts.submitStyle == "href" && initial) $this.find(".centerBtns a").eq(i).attr({ "href": opts.url + getConnect() + opts.idParameter + "=" + pageIndex }); } break; case (opts.showPage - 1): if (opts.simpleType == 1) { var pageIndex = clickPage - (middle - i - 1); $this.find(".centerBtns a").eq(i).text(pageIndex); $this.find(".centerBtns a").eq(i).attr({ "value": pageIndex }); if (opts.submitStyle == "href" && initial) $this.find(".centerBtns a").eq(i).attr({ "href": opts.url + getConnect() + opts.idParameter + "=" + pageIndex }); } else { $this.find(".centerBtns a").eq(i).text(opts.total); $this.find(".centerBtns a").eq(i).attr({ "value": opts.total }); if (opts.submitStyle == "href" && initial) $this.find(".centerBtns a").eq(i).attr({ "href": opts.url + getConnect() + opts.idParameter + "=" + opts.total }); } break; case (opts.showPage - 2): if (opts.simpleType == 1) { var pageIndex = clickPage - (middle - i - 1); $this.find(".centerBtns a").eq(i).text(pageIndex); $this.find(".centerBtns a").eq(i).attr({ "value": pageIndex }); if (opts.submitStyle == "href" && initial) $this.find(".centerBtns a").eq(i).attr({ "href": opts.url + getConnect() + opts.idParameter + "=" + pageIndex }); } else { $this.find(".centerBtns a").eq(i).text("····"); var pageIndex = clickPage - (middle - i - 1); $this.find(".centerBtns a").eq(i).attr({ "value": pageIndex }); if (opts.submitStyle == "href" && initial) $this.find(".centerBtns a").eq(i).attr({ "href": opts.url + getConnect() + opts.idParameter + "=" + pageIndex }); } break; default: var pageIndex = clickPage - (middle - i - 1); $this.find(".centerBtns a").eq(i).text(pageIndex); $this.find(".centerBtns a").eq(i).attr({ "value": pageIndex }); if (opts.submitStyle == "href" && initial) $this.find(".centerBtns a").eq(i).attr({ "href": opts.url + getConnect() + opts.idParameter + "=" + pageIndex }); break; } } else { switch (i) { case 0: if (opts.simpleType == 1) { var pageIndex = newClickPage - (middle - i - 1); $this.find(".centerBtns a").eq(i).text(pageIndex); $this.find(".centerBtns a").eq(i).attr({ "value": pageIndex }); if (opts.submitStyle == "href" && initial) $this.find(".centerBtns a").eq(i).attr({ "href": opts.url + getConnect() + opts.idParameter + "=" + pageIndex }); } else { $this.find(".centerBtns a").eq(i).text(1); $this.find(".centerBtns a").eq(i).attr({ "value": 1 }); if (opts.submitStyle == "href" && initial) $this.find(".centerBtns a").eq(i).attr({ "href": opts.url + getConnect() + opts.idParameter + "=" + 1 }); } break; case 1: if (opts.simpleType == 1) { var pageIndex = newClickPage - (middle - i - 1); $this.find(".centerBtns a").eq(i).text(pageIndex); $this.find(".centerBtns a").eq(i).attr({ "value": pageIndex }); if (opts.submitStyle == "href" && initial) $this.find(".centerBtns a").eq(i).attr({ "href": opts.url + getConnect() + opts.idParameter + "=" + pageIndex }); } else { $this.find(".centerBtns a").eq(i).text("····"); var pageIndex = newClickPage - (middle - i - 1); $this.find(".centerBtns a").eq(i).attr({ "value": pageIndex }); if (opts.submitStyle == "href" && initial) $this.find(".centerBtns a").eq(i).attr({ "href": opts.url + getConnect() + opts.idParameter + "=" + pageIndex }); } break; case (opts.showPage - 1): if (opts.simpleType == 1) { var pageIndex = newClickPage - (middle - i - 1); $this.find(".centerBtns a").eq(i).text(pageIndex); $this.find(".centerBtns a").eq(i).attr({ "value": pageIndex }); if (opts.submitStyle == "href" && initial) $this.find(".centerBtns a").eq(i).attr({ "href": opts.url + getConnect() + opts.idParameter + "=" + pageIndex }); } else { $this.find(".centerBtns a").eq(i).text(opts.total); $this.find(".centerBtns a").eq(i).attr({ "value": opts.total }); if (opts.submitStyle == "href" && initial) $this.find(".centerBtns a").eq(i).attr({ "href": opts.url + getConnect() + opts.idParameter + "=" + opts.total }); } break; default: var pageIndex = newClickPage - (middle - i - 1); $this.find(".centerBtns a").eq(i).text(pageIndex); $this.find(".centerBtns a").eq(i).attr({ "value": pageIndex }); if (opts.submitStyle == "href" && initial) $this.find(".centerBtns a").eq(i).attr({ "href": opts.url + getConnect() + opts.idParameter + "=" + pageIndex }); break; } } } } else { for (var i = 0; i < opts.showPage; i++) { if (i == opts.showPage - 1) { if (opts.simpleType == 1) { var pageIndex = i + 1; $this.find(".centerBtns a").eq(i).text(pageIndex); $this.find(".centerBtns a").eq(i).attr({ "value": pageIndex }); if (opts.submitStyle == "href" && initial) $this.find(".centerBtns a").eq(i).attr({ "href": opts.url + getConnect() + opts.idParameter + "=" + pageIndex }); } else { $this.find(".centerBtns a").eq(i).text(opts.total); $this.find(".centerBtns a").eq(i).attr({ "value": opts.total }); if (opts.submitStyle == "href" && initial) $this.find(".centerBtns a").eq(i).attr({ "href": opts.url + getConnect() + opts.idParameter + "=" + opts.total }); } } else if (i == opts.showPage - 2 && opts.showPage < opts.total) { if (opts.simpleType == 1) { var pageIndex = i + 1; $this.find(".centerBtns a").eq(i).text(pageIndex); $this.find(".centerBtns a").eq(i).attr({ "value": pageIndex }); if (opts.submitStyle == "href" && initial) $this.find(".centerBtns a").eq(i).attr({ "href": opts.url + getConnect() + opts.idParameter + "=" + pageIndex }); } else { $this.find(".centerBtns a").eq(i).text("····"); var pageIndex = i + 1; $this.find(".centerBtns a").eq(i).attr({ "value": pageIndex }); if (opts.submitStyle == "href" && initial) $this.find(".centerBtns a").eq(i).attr({ "href": opts.url + getConnect() + opts.idParameter + "=" + pageIndex }); } } else { var pageIndex = i + 1; $this.find(".centerBtns a").eq(i).text(pageIndex); $this.find(".centerBtns a").eq(i).attr({ "value": pageIndex }); if (opts.submitStyle == "href" && initial) $this.find(".centerBtns a").eq(i).attr({ "href": opts.url + getConnect() + opts.idParameter + "=" + pageIndex }); } } } //设置选中效果 $this.find(".centerBtns a").each(function (suffix, item) { if (parseInt($(item).attr("value"), 10) == clickPage) { if (!!opts.currentBgColor.replace(/\s/g, "")) $(item).css({ "background-color": opts.currentBgColor }).parent().siblings().children().css({ "background-color": opts.centerBgColor.replace(/\s/g, "") }); if (!!opts.currentFontColor.replace(/\s/g, "")) $(item).css({ "color": opts.currentFontColor }).parent().siblings().children().css({ "color": opts.centerFontColor.replace(/\s/g, "") }); if (!!opts.currentBorder.replace(/\s/g, "")) $(item).css({ "border": opts.currentBorder }).parent().siblings().children().css({ "border": opts.centerBorder }); if (!!opts.currentFontSize) $(item).css({ "font-size": opts.currentFontSize + "px" }).parent().siblings().children().css({ "font-size": opts.fontSize + "px" }); if (!!opts.fontWeight) $(item).css({ "font-weight": opts.currentFontWeight }).parent().siblings().children().css({ "font-weight": opts.fontWeight }); } }); if (clickPage != opts.currentPage || opts.submitStyle == "ajax") { //避免第一次加载时就请求 //设置当前页码 opts.currentPage = clickPage; //重绘时禁止反复请求 if (!opts.firstAjaxSubmit && initial) { opts.firstAjaxSubmit = true; initial = false; return; } //将页码idParameter添加到ajaxData末尾一起发送 opts.ajaxData[opts.idParameter] = opts.currentPage; //预提交处理函数 opts.beforeAjaxSubmit(); var ajax_param = { url: opts.url, type: opts.ajaxSubmitType, data: opts.ajaxData, dataType: opts.ajaxDataType, success: function (data) { if (!data.total || !data.currentPage) { data.total = 1; data.currentPage = 1; } draw(data.total, data.currentPage); //保持和后台参数同步 opts.ajaxSubmitBack(data); } }; opts.ajaxDataType == "jsonp" && (ajax_param[‘jsonpCallback‘] = opts.jsonpCBName); //异步访问后台的代码 //if (opts.submitStyle == "ajax") { $.ajax(ajax_param); //} } } else if (slideBool && opts.animation) { //slideBool变量防止多次滚动 滚动方式 var left = -parseInt($this.find("ul").css("left").replace(/\D/g, ""), 10); //获得当前ul的left坐标 var liWidth = parseInt($this.find("ul li").eq(0).css("width").replace(/\D/g, ""), 10); //单个li的宽度 clickPage = parseInt($(element).attr("value"), 10); //点击页码 var slidePage = clickPage - middle; //需要滑动的页数,正负表示左右方向 //动画 if (slidePage > 0 && last < opts.total) { //判断是否符合滚动规则 往右 var beforeLast = last; //设置参数 last += slidePage; if (last > opts.total) { //判断末尾移动长度大于的情况 last = opts.total; slidePage = opts.total - beforeLast; } first += slidePage; middle += slidePage; //获得滚动宽度 var slideWidth = slidePage * liWidth + (opts.gapWidth * 2) * slidePage; //动画 slideBool = false; //禁止按钮点击 $this.find("ul").animate({ "left": left - slideWidth + "px" }, 300, function () { slideBool = true; //开启按钮点击 }); } else if (slidePage < 0 && first > 1) { //判断是否符合滚动规则 往左 var beforeFirst = first; //设置参数 first += slidePage; if (first < 1) { //判断开头移动长度少于的情况 first = 1; slidePage = 1 - beforeFirst; } last += slidePage; middle += slidePage; //获得滚动宽度 var slideWidth = slidePage * liWidth + (opts.gapWidth * 2) * slidePage; //动画 slideBool = false; //禁止按钮点击 $this.find("ul").animate({ "left": left - slideWidth + "px" }, 300, function () { slideBool = true; //开启按钮点击 }); } //设置点击选中效果 if (!!opts.currentBgColor.replace(/\s/g, "")) $(element).css({ "background-color": opts.currentBgColor }).parent().siblings().children().css({ "background-color": opts.centerBgColor.replace(/\s/g, "") }); if (!!opts.currentFontColor.replace(/\s/g, "")) $(element).css({ "color": opts.currentFontColor }).parent().siblings().children().css({ "color": opts.centerFontColor.replace(/\s/g, "") }); if (!!opts.currentBorder.replace(/\s/g, "")) $(element).css({ "border": opts.currentBorder }).parent().siblings().children().css({ "border": opts.centerBorder }); if (!!opts.currentFontSize) $(element).css({ "font-size": opts.currentFontSize + "px" }).parent().siblings().children().css({ "font-size": opts.fontSize + "px" }); if (!!opts.fontWeight) $(element).css({ "font-weight": opts.currentFontWeight }).parent().siblings().children().css({ "font-weight": opts.fontWeight }); if (clickPage != opts.currentPage || opts.submitStyle == "ajax") { //避免第一次加载时就请求 //设置当前页码 opts.currentPage = clickPage; //重绘时禁止反复请求 if (!opts.firstAjaxSubmit && initial) { opts.firstAjaxSubmit = true; initial = false; return; } //将页码idParameter添加到ajaxData末尾一起发送 opts.ajaxData[opts.idParameter] = opts.currentPage; //预提交处理函数 opts.beforeAjaxSubmit(); var ajax_param = { url: opts.url, type: opts.ajaxSubmitType, data: opts.ajaxData, dataType: opts.ajaxDataType, success: function (data) { if (!data.total || !data.currentPage) { data.total = 1; data.currentPage = 1; } draw(data.total, data.currentPage); //保持和后台参数同步 opts.ajaxSubmitBack(data); } }; opts.ajaxDataType == "jsonp" && (ajax_param[‘jsonpCallback‘] = opts.jsonpCBName); //异步访问后台的代码 // if (opts.submitStyle == "ajax") { $.ajax(ajax_param); // } } } }); }); //两边的a标签相关属性 $this.find(".otherBtns a").css({ "background-color": opts.otherBgColor, "margin": "0 " + opts.gapWidth + "px", "color": opts.otherFontColor, "border": opts.otherBorder }).hover(function () { if (!!opts.otherFontHoverColor.replace(/\s/g, "")) $(this).css({ "color": opts.otherFontHoverColor }); if (!!opts.otherHoverBgColor.replace(/\s/g, "")) $(this).css({ "background-color": opts.otherHoverBgColor }); if (!!opts.otherHoverBorder.replace(/\s/g, "")) $(this).css({ "border": opts.otherHoverBorder }); }, function () { if (!!opts.otherFontColor.replace(/\s/g, "")) $(this).css({ "color": opts.otherFontColor }); if (!!opts.otherBgColor.replace(/\s/g, "")) $(this).css({ "background-color": opts.otherBgColor }); if (!!opts.otherBorder.replace(/\s/g, "")) $(this).css({ "border": opts.otherBorder }); }); //设置ul相关属性 $this.find("ul").css({ "position": "absolute", "height": "inherit", "list-style": "none", "left": "0", "top": "0", "margin": "0", "padding": "0" }); //设置li相关属性 $this.find("ul li").css({ "display": "block", "float": "left", "height": "inherit", "overflow": "hidden", "margin": "0 " + opts.gapWidth + "px" }); //设置内部三个div的共有样式 $this.find("div").css({ "float": "left", "height": "inherit" }); //获得中间div的长度和ul的长度并设置 var centerWidth = 0; var centerAllWidth = 0; if (opts.total > 0) { centerWidth = parseInt($this.find("ul li").eq(0).css("width").replace(/\D/g, ""), 10) * opts.showPage; //中间div的总宽度 centerAllWidth = parseInt($this.find("ul li").eq(0).css("width").replace(/\D/g, ""), 10) * $this.find("ul li").length; //中间ul的总宽度 } if (!!opts.gapWidth) { centerWidth += (opts.showPage + 1) * (opts.gapWidth * 2) - (opts.gapWidth * 2); centerAllWidth += (opts.total + 1) * (opts.gapWidth * 2) - (opts.gapWidth * 2); } //设置中间div宽度和其它样式 $this.find(".centerBtns").css({ "position": "relative", "overflow": "hidden", "width": centerWidth + "px" }); //设置中间div内ul的宽度 $this.find(".centerBtns ul").css({ "width": centerAllWidth + "px" }); //设置跳转div内的标签的属性 $this.find(".jumpBtns>input").css({ "width": opts.jumpInputWidth + "px", "float": "left", "height": opts.height + "px", "outline": "none", "text-align": "center", "border-radius": opts.cormer + "px", "border": opts.jumpBorder, "margin": "0 " + opts.gapWidth + "px", "color": opts.jumpFontColor, "line-height": opts.height + "px" }); $this.find(".jumpBtns a").css({ "background-color": opts.jumpBgColor, "margin": "0 " + opts.gapWidth + "px", "color": opts.jumpFontColor, "border": opts.jumpBorder }).hover(function () { if (!!opts.jumpFontHoverColor.replace(/\s/g, "")) $(this).css({ "color": opts.jumpFontHoverColor }); if (!!opts.jumpHoverBgColor.replace(/\s/g, "")) $(this).css({ "background-color": opts.jumpHoverBgColor }); if (!!opts.jumpHoverBorder.replace(/\s/g, "")) $(this).css({ "border": opts.jumpHoverBorder }); }, function () { if (!!opts.jumpFontColor.replace(/\s/g, "")) $(this).css({ "color": opts.jumpFontColor }); if (!!opts.jumpBgColor.replace(/\s/g, "")) $(this).css({ "background-color": opts.jumpBgColor }); if (!!opts.jumpBorder.replace(/\s/g, "")) $(this).css({ "border": opts.jumpBorder }); }); //根据a标签是否有边框,设置最外部div的高度,ul和li等会继承这个高度 if (!!opts.centerBorder.replace(/\s/g, "") && opts.centerBorder != "none") opts.height += parseInt(opts.centerBorder.split(" ")[0].replace(/\D/g, ""), 10) * 2; else if (!!opts.otherBorder.replace(/\s/g, "") && opts.otherBorder != "none") opts.height += parseInt(opts.otherBorder.split(" ")[0].replace(/\D/g, ""), 10) * 2; $this.css({ "height": opts.height + "px" }); //注册两边按钮的事件 $this.find(".otherBtns a").each(function (index, element) { $(element).click(function () { if (opts.animation) { //因为a标签可能比较多,故不用下面的遍历查找方法 if ($(element).attr("value") == "首页" && opts.currentPage != 1) { if (opts.submitStyle == "href") window.location.href = http://www.mamicode.com/$this.find(".centerBtns a").first().prop("href"); else $this.find(".centerBtns a").first().trigger("click"); } else if ($(element).attr("value") == "上一页" && opts.currentPage != 1) { if (opts.submitStyle == "href") window.location.href = http://www.mamicode.com/$this.find(".centerBtns a").eq(opts.currentPage - 2).prop("href"); else $this.find(".centerBtns a").eq(opts.currentPage - 2).trigger("click"); } else if ($(element).attr("value") == "下一页" && opts.currentPage != opts.total) { if (opts.submitStyle == "href") window.location.href = http://www.mamicode.com/$this.find(".centerBtns a").eq(opts.currentPage).prop("href"); else $this.find(".centerBtns a").eq(opts.currentPage).trigger("click"); } else if ($(element).attr("value") == "尾页" && opts.currentPage != opts.total) { if (opts.submitStyle == "href") window.location.href = http://www.mamicode.com/$this.find(".centerBtns a").last().prop("href"); else $this.find(".centerBtns a").last().trigger("click"); } } else { //a标签比较少 if ($(element).attr("value") == "首页" && opts.currentPage != 1) { if (opts.submitStyle == "href") { if (opts.simpleType == 1) window.location.href = http://www.mamicode.com/opts.url + getConnect() + opts.idParameter +"=1"; else window.location.href = http://www.mamicode.com/$this.find(".centerBtns a").first().prop("href"); } else { if (opts.simpleType == 1) { poleClick = 1; $this.find(".centerBtns a").eq(1).trigger("click"); } else $this.find(".centerBtns a").first().trigger("click"); } } else if ($(element).attr("value") == "尾页" && opts.currentPage != opts.total) { if (opts.submitStyle == "href") { if (opts.simpleType == 1) window.location.href = http://www.mamicode.com/opts.url + getConnect() + opts.idParameter +"=" + opts.total; else window.location.href = http://www.mamicode.com/$this.find(".centerBtns a").last().prop("href"); } else { if (opts.simpleType == 1) { poleClick = opts.total; $this.find(".centerBtns a").eq(1).trigger("click"); } else $this.find(".centerBtns a").last().trigger("click"); } } else if ($(element).attr("value") == "上一页" && opts.currentPage != 1) { var entity = $this.find(".centerBtns a"); for (var item in entity) { if (parseInt(entity.eq(item).attr("value"), 10) == (parseInt(opts.currentPage, 10) - 1)) { if (opts.submitStyle == "href") window.location.href = http://www.mamicode.com/entity.eq(item).prop("href"); else entity.eq(item).trigger("click"); break; } } } else if ($(element).attr("value") == "下一页" && opts.currentPage != opts.total) { var entity = $this.find(".centerBtns a"); for (var item in entity) { if (parseInt(entity.eq(item).attr("value"), 10) == (parseInt(opts.currentPage, 10) + 1)) { if (opts.submitStyle == "href") window.location.href = http://www.mamicode.com/entity.eq(item).prop("href"); else entity.eq(item).trigger("click"); break; } } } } }); }); //注册跳转div内的标签事件 $this.find(".jumpBtns>input").on("keyup", function () { if (/^[1-9]\d*$/.test($(this).val()) || $(this).val() == "") { if ($(this).val() != "" && parseInt($(this).val()) <= opts.total) { $(this).attr({ "data": $(this).val() }); } else if ($(this).val() == "") { $(this).attr({ "data": $(this).val() }); } else { $(this).val($(this).attr("data")); } } else { $(this).val($(this).attr("data")); } }); $this.find(".jumpBtns>a").click(function () { if (!/^[1-9]\d*$/.test($this.find(".jumpBtns>input").val()) || parseInt($this.find(".jumpBtns>input").val()) > opts.total) { $this.find(".jumpBtns>input").val($this.find(".jumpBtns>input").attr("data")); return; } if (opts.animation) { $this.find(".centerBtns a").eq(parseInt($this.find(".jumpBtns>input").val()) - 1).trigger("click"); } else { if (opts.submitStyle == "href") { var _connect = ""; if (opts.url.indexOf("?") == -1) _connect = "?"; else _connect = "&"; window.location.href = http://www.mamicode.com/opts.url + _connect + opts.idParameter +"=" + $this.find(".jumpBtns>input").val(); } else if ($this.find(".jumpBtns>input").val() == opts.total) { if (opts.simpleType == 1) { jumpClick++; $this.find(".centerBtns a").eq(1).trigger("click"); } else $this.find(".centerBtns a").last().trigger("click"); } else if ($this.find(".jumpBtns>input").val() == "1") { if (opts.simpleType == 1) { jumpClick++; $this.find(".centerBtns a").eq(1).trigger("click"); } else $this.find(".centerBtns a").first().trigger("click"); } else if (!!$this.find(".jumpBtns>input").val()) { jumpClick++; $this.find(".centerBtns a").eq(1).trigger("click"); } } }); //两侧按钮在特殊情况的cursor if (opts.total <= 1) { $this.find(".otherBtns a").css({ "cursor": "not-allowed" }); } //href模式下设置所有a标签的href function setHref() { if (opts.submitStyle == "href") { $this.find(".centerBtns a").each(function (i, e) { $(this).attr({ "href": opts.url + getConnect() + opts.idParameter + "=" + $(this).attr("value") }); }); } } //根据参数同步插件显示 function draw(total, currentPage) { if (opts.total != Number(total) || opts.currentPage != Number(currentPage)) { $this.empty(); opts.total = Number(total); opts.currentPage = Number(currentPage); opts.firstAjaxSubmit = false; opts.isNewDraw = true; opts.showPage = oldShowPage; opts.height = oldHeight; $this = $this.paging(opts); } } //初始化显示 if (opts.animation) $this.find(".centerBtns a").eq(opts.currentPage - 1).trigger("click"); //初始化后自动展示到当前页,方式为滚动 else { $this.find(".centerBtns a").first().trigger("click"); //初始化后自动展示到当前页,方式为精简 initial = false; } return $this; /////////////////////////代码内部 //}); } }); })(jQuery, window, document);
html代码
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>Page</title> <style type="text/css"> * { margin: 0px; padding: 0px; } </style> </head> <body> <br /> <h1 style="text-align:center;color:#0026ff;">自制实用分页插件</h1> <div style="margin:50px auto;width:1000px;margin-top:50px;"> <p style="font-size:18px;font-family:‘微软雅黑‘;">默认皮肤,无跳转框,滚动模式:</p><br /> <div class="page_div"></div> </div> <div style="margin:50px auto;width:1000px;"> <p style="font-size:18px;font-family:‘微软雅黑‘;">默认皮肤,带跳转框,无首页尾页,精简模式一:</p><br /> <div class="page_div1"></div> </div> <div style="margin:50px auto;width:1000px;"> <p style="font-size:18px;font-family:‘微软雅黑‘;">默认皮肤,带跳转框,精简模式二:</p><br /> <div class="page_div0"></div> </div> <div style="margin:50px auto;width:1000px;"> <p style="font-size:18px;font-family:‘微软雅黑‘;">样式参考,自定义小清新皮肤,有跳转框,滚动模式:</p><br /> <div class="page_div2"></div> </div> <div style="margin:50px auto;width:1000px;"> <p style="font-size:18px;font-family:‘微软雅黑‘;">样式参考,自定义小清新皮肤,无首页尾页,带跳转框,精简模式一:</p><br /> <div class="page_div3"></div> </div> <div style="margin:50px auto;width:1000px;"> <p style="font-size:18px;font-family:‘微软雅黑‘;">样式参考,自定义小清新皮肤,带跳转框,精简模式二:</p><br /> <div class="page_div4"></div> </div> <div style="margin:50px auto;width:1000px;"> <p style="font-size:18px;font-family:‘微软雅黑‘;color:red;line-height:30px;"> 该插件兼容至IE8及其以上版本,通过参数可以选择post方式请求还是get方式请求,支持异步获得数据通过回调函数操作html内容,皮肤可根据需求自己根据参数修改,更多定制请参看所有参数,给所有需要使用和学习的人,如遇问题可与我本人联系,鄙人QQ:997345399 </p> </div> <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script> <script src="http://www.mamicode.com/JS/jquery.paging.js"></script> <script type="text/javascript"> $(function () { //默认皮肤,滚动模式 var page1 = $(".page_div").paging({ total: 300, showJump: false, submitType: "get" }); //默认皮肤,精简模式一 var page2 = $(".page_div1").paging({ total: 300, showJump: true, animation: false, firstBtnString: "", lastBtnString: "" }); //默认皮肤,精简模式二 var page6 = $(".page_div0").paging({ total: 300, showJump: true, animation: false, simpleType: 1 }); //自定义皮肤,滚动模式 var page3 = $(".page_div2").paging({ total: 100, centerBgColor: "#fff", centerFontColor: "#000", centerBorder: "1px solid #ddd", transition: "all .2s", centerHoverBgColor: "#25dd3d", centerHoverBorder: "1px solid #25dd3d", centerFontHoverColor: "#fff", otherFontHoverColor: "#fff", otherBorder: "1px solid #ddd", otherHoverBorder: "1px solid #25dd3d", otherBgColor: "#fff", otherHoverBgColor: "#25dd3d", currentFontColor: "#fff", currentBgColor: "#f79898", currentBorder: "1px solid #f79898", fontSize: 13, currentFontSize: 13, cormer: 2, gapWidth: 3, beforeBtnString: "<<", nextBtnString: ">>", showJump: true, jumpBgColor: "#fff", jumpFontHoverColor: "#fff", jumpHoverBgColor: "#25dd3d", jumpBorder: "1px solid #ddd", jumpHoverBorder: "1px solid #25dd3d", }); //自定义皮肤,精简模式一 var page4 = $(".page_div3").paging({ total: 100, animation: false, centerBgColor: "#fff", centerFontColor: "#000", centerBorder: "1px solid #ddd", transition: "all .2s", centerHoverBgColor: "#25dd3d", centerHoverBorder: "1px solid #25dd3d", centerFontHoverColor: "#fff", otherFontHoverColor: "#fff", otherBorder: "1px solid #ddd", otherHoverBorder: "1px solid #25dd3d", otherBgColor: "#fff", otherHoverBgColor: "#25dd3d", currentFontColor: "#fff", currentBgColor: "#f79898", currentBorder: "1px solid #f79898", fontSize: 13, currentFontSize: 13, cormer: 2, gapWidth: 3, showJump: true, jumpBgColor: "#fff", jumpFontHoverColor: "#fff", jumpHoverBgColor: "#25dd3d", jumpBorder: "1px solid #ddd", jumpHoverBorder: "1px solid #25dd3d", firstBtnString: "", lastBtnString: "" }); //自定义皮肤,精简模式二 var page5 = $(".page_div4").paging({ total: 100, animation: false, centerBgColor: "#fff", centerFontColor: "#000", centerBorder: "1px solid #ddd", transition: "all .2s", centerHoverBgColor: "#25dd3d", centerHoverBorder: "1px solid #25dd3d", centerFontHoverColor: "#fff", otherFontHoverColor: "#fff", otherBorder: "1px solid #ddd", otherHoverBorder: "1px solid #25dd3d", otherBgColor: "#fff", otherHoverBgColor: "#25dd3d", currentFontColor: "#fff", currentBgColor: "#f79898", currentBorder: "1px solid #f79898", fontSize: 13, currentFontSize: 13, cormer: 2, gapWidth: 3, showJump: true, jumpBgColor: "#fff", jumpFontHoverColor: "#fff", jumpHoverBgColor: "#25dd3d", jumpBorder: "1px solid #ddd", jumpHoverBorder: "1px solid #25dd3d", simpleType: 1 }); //调用返回当前页API //if(page1.IsDone()){ // setInterval(function () { // alert(page1.GetCurrentPage()); // }, 5000); //} ////API 返回当前选中页数 //if (page2.IsDone()) { // alert(page2.GetCurrentPage()); //弹出显示当前选中页码 //} ////API 新增请求参数 //if (page2.IsDone()) { // page2.AddAjaxData({ "date": "2011-12-12", "content": "this is test add extra param" }); //在原有参数基础上,新增请求参数 //} ////API 获取当前拼装好的请求url,用于后续修改url,以便在后面追加参数 ////API 修改请求url参数 //if (page2.IsDone()) { // page2.SetRequestUrl("/Home/Index?id=1&content=‘test132‘"); //} /******可使用参数列表*********/ //total: 0, //全部页数 //showPage: 9, //显示的页数 //height: 30, //高 //width: 8, //宽 //jumpInputWidth: 60, //跳转输入框的宽 //fontFamily: "微软雅黑", //字体 //fontSize: 12, //字体大小 //currentFontSize: 12, //当前选中页的字体大小 //fontWeight: 400, //字体宽度 //currentFontWeight: 400, //当前选中页的字体粗细 //centerFontColor: "#000", //中间字体颜色 //otherFontColor: "#000", //两边字体颜色 //centerFontHoverColor: "red", //中间鼠标悬浮的字体颜色 //otherFontHoverColor: "red", //两边鼠标悬浮的字体颜色 //currentFontColor: "red", //当前选中页的字体颜色 //jumpFontColor: "#000", //跳转内部标签的字体颜色 //jumpFontHoverColor: "red", // 跳转内部标签的悬浮字体颜色 //currentPage: 1, //当前页 //centerBgColor: "#b6ff00", //中间页数按钮的底色 //centerHoverBgColor: "", //中间鼠标悬浮的的底色 //otherBgColor: "#b6ff00", //两边按钮的底色 //otherHoverBgColor: "", //两边鼠标悬浮的背景颜色 //jumpBgColor: "#b6ff00", //跳转a标签按钮的背景色 //jumpHoverBgColor: "", //跳转a标签背景的悬浮背景色 //currentBgColor: "#73ccfd", //当前选中页的底色 //centerBorder: "1px solid green", //中间按钮的边框 //otherBorder: "1px solid green", //两边按钮的边框 //centerHoverBorder: "", //中间按钮悬浮边框 //otherHoverBorder: "", //两边按钮悬浮边框 //jumpBorder: "1px solid green", //跳转内标签的边框 //jumpHoverBorder: "", //跳转内标签的悬浮边框 //currentBorder: "", //当前选中页的边框 //showJump: false, //是否显示跳转功能 //transition: "initial", //效果延迟 //gapWidth: 2, //间隙宽度 //cormer: 0, //按钮的边角曲度 //beforeBtnString: "上一页", //上一页按钮内显示的文字 //nextBtnString: "下一页", //下一页按钮内显示的文字 //firstBtnString: "首页", //首页按钮内显示的内容 //lastBtnString: "尾页", //尾页按钮内显示的内容 //jumpBtnString: "跳转", //跳转按钮的显示内容 //submitStyle: "ajax", //点击按钮后的提交方式,有a标签的href提交和ajax异步提交两种选择,滚动显示方式只支持ajax方式 //ajaxSubmitType: "post", //注明是通过get方式访问还是post方式访问 //idParameter: "pageId", //传到后台的当前页的id的参数名,这个传值会自动添加在href或ajax的url末尾 //url: "/Home/List/", //需要提交的目标控制器,如"/Home/List/"或"/Home/List?name=‘张三‘&password=‘123456‘" //limit: 5000, //设置滚动显示方式的极限值,大于则自动切换无滚动模式 //animation: true, //是否是滚动动画方式呈现 false为精简方式呈现 页数大于limit时无论怎么设置自动默认为false //ajaxData: {}, //ajax方式传值时的附加传值,要传的参数放在这里面,页面参数只要指定idParamemeter就好,会自动添加,该参数只有在ajax方式下有用 //ajaxDataType: "json", //发生ajax请求时,dataType参数值,如跨域时为‘jsonp‘ //jsonpCBName: "jsonp_cb", //跨域请求时的回调函数名,ajaxDataType为jsonp时有效 //firstAjaxSubmit: true, //表示初始化时是否自动请求一次,用以获得total,currentPage等参数 //beforeAjaxSubmit: function () { }, //ajax模式下,在发出请求之前的操作函数 //ajaxSubmitBack: function (data) { } //用于ajax返回的数据的操作,回调函数,data为服务器返回数据 //simpleType: 0 // 精简模式可选0和1两种 /***********可使用部分API参考,API统一通过PageAPI对象调用,参考上面的例子****************/ //IsDone() //判断插件是否已初始化完成 //GetCurrentPage() //获取当前页 //GetTotalPage() //获取总页数 //AddAjaxData(json) //增加或替换附带发送参数 //SetRequestUrl(string) //改变插件请求url //GetAjaxData() //获取当前附带传参对象 //ReplaceAjaxData(json) //用新对象完全替换当前附带传参对象 //AjaxSubmit() //插件外主动请求 //HiddenLast(int) //同时隐藏/显示首页和上一页标签 0隐藏 1显示 下个版本增加,当前版本不可用 //HiddenFirst(int) //同时隐藏/显示尾页和下一页标签 0隐藏 1显示 下个版本增加,当前版本不可用 }); </script> </body> </html>
分页插件
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。