发现一款前端分页插件jQuery分页插件sPage，简洁大方易用，推荐给大家啦。作者jq22 && jq3309

.spage-total{display: inline-block;margin-right: 20px;line-height: 35px;color: #666;font-size:14px;}
.spage-number{display: inline-block;color: #666;font-size:14px;}
.spage-number button{position: relative;box-sizing: border-box;display: inline-block;margin-left:-1px;padding: 0px 14px;line-height: 33px;border:1px solid #ddd;text-align: center;transition: all .2s;cursor: pointer;outline: none;background: none;user-select: none;color: #666}
.spage-number button.active{background: #2d98e6;color: #fff;border-color:#2d98e6;z-index: 3;}
.spage-number button.active:hover{background: #2d98e6;color: #fff;border-color:#2d98e6;z-index: 3;}
.spage-number button:hover{background-color: #eee;}
.spage-number button.button-disabled{cursor: not-allowed;color: #ccc;}
.spage-number .spage-after,.spage-before{padding:0px;width: 40px}
.spage-skip{display: inline-block;margin-left: 20px;line-height: 35px;color: #666;font-size:14px;}
.spage-skip input{box-sizing: border-box;display: inline-block;width: 45px;height: 35px;text-align: center;vertical-align: top;border:1px solid #ddd;background: none;outline: none;transition: all .2s;}
.spage-skip input:focus{border-color: #2d98e6;}
.spage-skip button{display: inline-block;padding: 0px 14px;line-height: 33px;vertical-align: top;color: #666;border:1px solid #ddd;cursor: pointer;transition: all .2s;outline: none;background: none;user-select: none;}
.spage-skip button:hover{background: #2d98e6;color: #fff;border:1px solid #2d98e6;}

/*  
*  jQuery分页插件sPage
*  by 凌晨四点半
*  20191229
*  version:1.2.2
*  https://github.com/jvbei/sPage
*/
; (function ($, window, document, undefined) {'use strict';var defaults = {page: 1,//当前页pageSize: 10,//每页显示多少条total: 0,//数据总条数showTotal: false,//是否显示总条数totalTxt: "共{total}条",//数据总条数文字描述noData: false,//没有数据时是否显示分页，默认false不显示，true显示第一页showSkip: false,//是否显示跳页showPN: true,//是否显示上下翻页prevPage: "上一页",//上翻页按钮文字nextPage: "下一页",//下翻页按钮文字fastForward: 0,//快进快退，默认0页backFun: function (page) {}//点击分页按钮回调函数，返回当前页码};function Plugin(element, options) {this.element = $(element);this.settings = $.extend({}, defaults, options);this.pageNum = 1, //记录当前页码this.pageList = [], //页码集合this.pageTatol = 0; //记录总页数this.init();}$.extend(Plugin.prototype, {init: function () {this.element.empty();this.viewHtml();},creatHtml: function (i) {i == this.settings.page ? this.pageList.push('<button class="active" data-page=' + i + '>' + i + '</button>'): this.pageList.push('<button data-page=' + i + '>' + i + '</button>');},viewHtml: function () {var settings = this.settings;var pageTatol = 0;var pageArr = [];//分页元素集合，减少dom重绘次数if (settings.total > 0) {pageTatol = Math.ceil(settings.total / settings.pageSize);} else {if (settings.noData) {pageTatol = 1;settings.page = 1;settings.total = 0;} else {return;}}this.pageTatol = pageTatol;this.pageNum = settings.page;if (settings.showTotal) {pageArr.push('<div class="spage-total">' + settings.totalTxt.replace(/\{(\w+)\}/gi, settings.total) + '</div>');}pageArr.push('<div class="spage-number">');this.pageList = [];//页码元素集合，包括上下页if (settings.showPN) {settings.page == 1 ? this.pageList.push('<button class="button-disabled" data-page="prev">' + settings.prevPage + '</button>') : this.pageList.push('<button data-page="prev">' + settings.prevPage + '</button>');}if (pageTatol <= 6) {for (var i = 1; i < pageTatol + 1; i++) {this.creatHtml(i);}} else {if (settings.page < 5) {for (var i = 1; i <= 5; i++) {this.creatHtml(i);}this.pageList.push('<button data-page="after" class="spage-after">...</button><button data-page=' + pageTatol + '>' + pageTatol + '</button>');} else if (settings.page > pageTatol - 4) {this.pageList.push('<button data-page="1">1</button><button data-page="before" class="spage-before">...</button>');for (var i = pageTatol - 4; i <= pageTatol; i++) {this.creatHtml(i);}} else {this.pageList.push('<button data-page="1">1</button><button data-page="before" class="spage-before">...</button>');for (var i = settings.page - 2; i <= Number(settings.page) + 2; i++) {this.creatHtml(i);}this.pageList.push('<button data-page="after" class="spage-after">...</button><button data-page=' + pageTatol + '>' + pageTatol + '</button>');}}if (settings.showPN) {settings.page == pageTatol ? this.pageList.push('<button class="button-disabled" data-page="next">' + settings.nextPage + '</button>') : this.pageList.push('<button data-page="next">' + settings.nextPage + '</button>');}pageArr.push(this.pageList.join(''));pageArr.push('</div>');if (settings.showSkip) {pageArr.push('<div class="spage-skip">跳至&nbsp;<input type="text" value="' + settings.page + '"/>&nbsp;页&nbsp;&nbsp;<button data-page="go">确定</button></div>');}this.element.html(pageArr.join(''));this.clickBtn();},clickBtn: function () {var that = this;var settings = this.settings;var ele = this.element;var pageTatol = this.pageTatol;this.element.off("click", "button");this.element.on("click", "button", function () {var pageText = $(this).data("page");switch (pageText) {case "prev":settings.page = settings.page - 1 >= 1 ? settings.page - 1 : 1;pageText = settings.page;break;case "next":settings.page = Number(settings.page) + 1 <= pageTatol ? Number(settings.page) + 1 : pageTatol;pageText = settings.page;break;case "before":settings.page = settings.page - settings.fastForward >= 1 ? settings.page - settings.fastForward : 1;pageText = settings.page;break;case "after":settings.page = Number(settings.page) + Number(settings.fastForward) <= pageTatol ? Number(settings.page) + Number(settings.fastForward) : pageTatol;pageText = settings.page;break;case "go":var p = parseInt(ele.find("input").val());if (/^[0-9]*$/.test(p) && p >= 1 && p <= pageTatol) {settings.page = p;pageText = p;} else {return;}break;default:settings.page = pageText;}// 点击或跳转当前页码不执行任何操作if (pageText == that.pageNum) {return;}that.pageNum = settings.page;that.viewHtml();settings.backFun(pageText);});this.element.off("keyup", "input");this.element.on("keyup", "input", function (event) {if (event.keyCode == 13) {var p = parseInt(ele.find("input").val());if (/^[0-9]*$/.test(p) && p >= 1 && p <= pageTatol && p != that.pageNum) {settings.page = p;that.pageNum = p;that.viewHtml();settings.backFun(p);} else {return;}}});if(settings.fastForward > 0){ele.find(".spage-after").hover(function(){$(this).html("&raquo;");},function(){$(this).html("...");});ele.find(".spage-before").hover(function(){$(this).html("&laquo;");},function(){$(this).html("...");});}}});$.fn.sPage = function (options) {return this.each(function(){new Plugin(this, options);});}
})(jQuery, window, document);

调用：

<div id="myPage"></div>
$("#myPage").sPage({page:1,//当前页码，必填total:150,//数据总条数，必填pageSize:10,//每页显示多少条数据，默认10条totalTxt:"共{total}条",//数据总条数文字描述，{total}为占位符，默认"共{total}条"showTotal:true,//是否显示总条数，默认关闭：falseshowSkip:true,//是否显示跳页，默认关闭：falseshowPN:true,//是否显示上下翻页，默认开启：trueprevPage:"上一页",//上翻页文字描述，默认“上一页”nextPage:"下一页",//下翻页文字描述，默认“下一页”backFun:function(page){//点击分页按钮回调函数，返回当前页码console.log(page);}
});