layui官网：https://www.layui.com/doc/modules/laypage.html 可找到layui.js和layui.css
效果
html
page.css
.pagination {
margin: 1rem;
}
.layui-laypage a,
.layui-laypage span {
padding: 0 12px;
border-radius: 5px;
}
.layui-laypage > a:first-child,
.layui-laypage > a:first-child em,
.layui-laypage > a:last-child,
.layui-laypage > a:last-child em,
.layui-laypage-em {
border-radius: 5px;
}
.layui-laypage a.layui-laypage-prev {
margin-right: 1rem;
}
.layui-laypage a.layui-laypage-next {
margin-left: 1rem;
}
.layui-laypage .button-go {
display: inline-block;
vertical-align: middle;
padding: 0 10px;
height: 28px;
line-height: 28px;
margin: 0 0 5px 10px;
background-color: #c8c8c8;
color: #fff;
font-size: 12px;
border: 1px solid #d8d8d8;
border-radius: 5px;
}
.layui-laypage .button-go:hover {
background-color: #c90b0b;
}
.layui-laypage .layui-laypage-skip {
color: #333;
}
.layui-laypage input {
border-radius: 5px;
}
改写的laypage.js
/** layui-v2.5.7 MIT License */
;layui.define(function (e) {
"use strict";
var a = document
, t = "getElementById"
, n = "getElementsByTagName"
, i = "laypage"
, r = "layui-disabled"
, u = function (e) {
var a = this;
a.config = e || {},
a.config.index = ++s.index,
a.render(!0)
};
u.prototype.type = function () {
var e = this.config;
if ("object" == typeof e.elem)
return void 0 === e.elem.length ? 2 : 3
}
,
u.prototype.view = function () {
var e = this
, a = e.config
, t = a.groups = "groups" in a ? 0 | a.groups : 5;
a.layout = "object" == typeof a.layout ? a.layout : ["prev", "page", "next"],
a.count = 0 | a.count,
a.curr = 0 | a.curr || 1,
a.limits = "object" == typeof a.limits ? a.limits : [10, 20, 30, 40, 50],
a.limit = 0 | a.limit || 10,
a.pages = Math.ceil(a.count / a.limit) || 1,
a.curr > a.pages && (a.curr = a.pages),
t < 0 ? t = 1 : t > a.pages && (t = a.pages),
a.prev = "prev" in a ? a.prev : "上一页",
a.next = "next" in a ? a.next : "下一页";
var n = a.pages > t ? Math.ceil((a.curr + (t > 1 ? 1 : 0)) / (t > 0 ? t : 1)) : 1
, i = {
prev: function () {
return a.prev ? '' + a.prev + "" : ""
}(),
page: function () {
var e = [];
if (a.count < 1)
return "";
n > 1 && a.first !== !1 && 0 !== t && e.push('' + (a.first || 1) + "");
var i = Math.floor((t - 1) / 2)
, r = n > 1 ? a.curr - i : 1
, u = n > 1 ? function () {
var e = a.curr + (t - i - 1);
return e > a.pages ? a.pages : e
}() : t;
for (u - r < t - 1 && (r = u - t + 1),
a.first !== !1 && r > 2 && e.push('…'); r <= u; r++)
r === a.curr ? e.push('" + r + "") : e.push('' + r + "");
return a.pages > t && a.pages > u && a.last !== !1 && (u + 1 < a.pages && e.push('…'),
0 !== t && e.push('' + (a.last || a.pages) + "")),
e.join("")
}(),
next: function () {
return a.next ? '' + a.next + "" : ""
}(),
count: '共 ' + a.count + " 条",
/** 改写 — 每页条码html */
limit: function () {
return ['显示', '', '条', ""].join("");
}(),
refresh: ['', '', ""].join(""),
/** 改写 — 跳转html */
skip: function () {
return ['到第', '', '页', ""].join("")
}()
};
return ['
var e = [];
return layui.each(a.layout, function (a, t) {
i[t] && e.push(i[t])
}),
e.join("")
}(), "
}
,
u.prototype.jump = function (e, a) {
if (e) {
var t = this
, i = t.config
, r = e.children
, u = e[n]("button")[0] // go按钮
, l = e[n]("input")[0] // 页码输入框
, p = e[n]("select")[0]
, input_size = e[n]("input")[1] // 改写 — 每页条数输入框
, c = function () {
var e = 0 | l.value.replace(/\s|\D/g, "");
e && (i.curr = e,
t.render())
};
if (a)
return c();
for (var o = 0, y = r.length; o < y; o++)
"a" === r[o].nodeName.toLowerCase() && s.on(r[o], "click", function () { // 点击页码事件
var e = 0 | this.getAttribute("data-page");
e < 1 || e > i.pages || (i.curr = e,
t.render())
});
p && s.on(p, "change", function () { // 下拉选择每页条数事件
var e = this.value;
i.curr * e > i.count && (i.curr = Math.ceil(i.count / e)),
i.limit = e,
t.render()
}),
u && s.on(u, "click", function () { // 改写 — 点击go事件
i.curr = l.value
i.limit = input_size.value
c()
})
}
}
,
u.prototype.skip = function (e) {
if (e) {
var a = this
, t = e[n]("input")[0];
t && s.on(t, "keyup", function (t) {
var n = this.value
, i = t.keyCode;
/^(37|38|39|40)$/.test(i) || (/\D/.test(n) && (this.value = n.replace(/\D/, "")),
13 === i && a.jump(e, !0))
})
}
}
,
u.prototype.render = function (e) {
var n = this
, i = n.config
, r = n.type()
, u = n.view();
2 === r ? i.elem && (i.elem.innerHTML = u) : 3 === r ? i.elem.html(u) : a[t](i.elem) && (a[t](i.elem).innerHTML = u), // 分页html写入
i.jump && i.jump(i, e);
var s = a[t]("layui-laypage-" + i.index);
n.jump(s),
i.hash && !e && (location.hash = "!" + i.hash + "=" + i.curr),
n.skip(s)
}
;
var s = {
render: function (e) {
var a = new u(e);
return a.index
},
index: layui.laypage ? layui.laypage.index + 1e4 : 0,
on: function (e, a, t) {
return e.attachEvent ? e.attachEvent("on" + a, function (a) {
a.target = a.srcElement,
t.call(e, a)
}) : e.addEventListener(a, t, !1),
this
}
};
e(i, s)
});