JQuery设计自定义分页组件
首先得引入JQuery，然后这里我用到了图标是阿里图标库的。接下来直接看代码。一个页面可定义多个组件，使用new的方式。
- JS代码
var MyPagination = function (total, getData, pageNumber, pageSize) {
let _this = this;
//定义变量
if (pageNumber) {
this.pageNumber = pageNumber;
} else {
this.pageNumber = 1;
}
if (pageSize) {
this.pageSize = pageSize;
} else {
this.pageSize = 10;
}
if (total) {
this.totalPage = Math.ceil((total) / this.pageSize);
} else {
this.totalPage = 0;
}
//定义一个执行函数
this.getFunData = getData;
//是否执行函数
this.executionFun = false;
this.initPageComponent = () => {
let liElement = '';
for (let i = 1; i <= 3; i++) {
liElement = liElement + '<li class="page-item" id="pageCode' + i + '"><a class="page-link" href="#"' +
'style="width:5px;font-weight: bold;color:#FFF;border: 0px;background-color: rgba(0,0,0,0)">' + i + '</a></li>\n';
}
let pagination = $(
'<div class="myPagination-div">' +
' <ul class="myPagination">' +
' <li class="pageHead"><label>共 ' + _this.totalPage + ' 页</label></li>' +
' <li id="firstPage"><i class="iconfont icon-left1" style="font-size: 8px;margin-left: 2px"></i></li>' +
' <li id="prePage"><i class="iconfont icon-left" style="font-size: 8px;margin-left: 2px"></i></li>' +
' <span class="pageCode">' +
this.showPageCode(_this.pageNumber) +
' </span>' +
' <li id="nextPage"><i class="iconfont icon-right" style="font-size: 8px;margin-right: 2px"></i></li>\n' +
' <li id="lastPage"><i class="iconfont icon-right1" style="font-size: 8px;margin-right: 2px"></i></li>\n' +
' <li class="pageTail">前往<input type="number" οnkeypress=\'return( /[\\d]/.test(String.fromCharCode(event.keyCode)))\' name="jumpPage"/>页</li>' +
' </ul>' +
'</div>'
);
//分页总样式
pagination.find(".myPagination").css({
"list-style-type": "none",
"margin": "0",
"padding": "0",
"display": "flex",
"justify-content": "flex-end"
});
//头部样式
pagination.find(".pageHead").css({
"font-size": "10px",
"margin-right": "1%"
});
pagination.find(".pageItem").css({
"width": "15px",
"height": "15px",
"margin-left": "6px",
"margin-right": "6px",
});
pagination.find(".pageCode").css({
"color": "#FFF",
"text-decoration": "none",
"display": "flex",
"justify-content": "flex-end"
});
//页码点击事件
pagination.find(".pageCode > li").click((e) => {
//设置点击页为当前页
_this.pageNumber = $(e.target).text();
_this.executionFun = true;
//显示效果处理
_this.selectStyle(pagination.find(".pageCode"))
})
//a链接样式
pagination.find(".pageCode>.pageItem > a").css({
"color": "#FFF",
"text-decoration": "none"
});
pagination.find(".pageCode >.pageItem > a,.pageItem > i,#firstPage,#lastPage,#prePage,#nextPage").hover(function () {
$(this).css({
"text-decoration": "none",
"color": "#8dfbfd",
"cursor": "pointer"
});
})
pagination.find(".pageCode >.pageItem > a,.pageItem > i,#firstPage,#lastPage,#prePage,#nextPage").mouseleave(function () {
//这里由于前面设置了点击事件改变颜色，但是这里的鼠标离开事件就会有冲突，进行处理
if ($(this).text() == _this.pageNumber) {
$(this).css({
"color": "#8dfbfd",
"text-decoration": "none"
});
} else {
$(this).css({
"color": "#FFF",
"text-decoration": "none"
});
}
})
//尾部样式
pagination.find(".pageTail").css({
// "border": "1px solid red",
"font-size": "10px",
"width": "60px",
"text-align": "right",
"margin-left": "2%",
"margin-right": "2%"
});
//输入框样式
pagination.find(".pageTail > input").css({
"text-align": "center",
"margin-left": "2%",
// "margin-right": "2%",
"width": "22px",
"height": "13px",
"border": "0px",
"border-radius": "3px",
"background-color": "#101332",
"outline": "none"
});
//去掉输入框后的按钮,对于伪类来说，可以直接在元素后端追加样式，如下
pagination.find(".pageTail > input").append(
'<style>.pageTail > input::-webkit-outer-spin-button,.pageTail > input::-webkit-inner-spin-button{' +
'-webkit-appearance:none}</style>')
pagination.find(".pageTail > input[type='number']").css({
"-moz-appearance": "textfield"
});
//添加点击事件
pagination.find("#firstPage").click(() => {
_this.showPageCode("first", pagination);
})
pagination.find("#lastPage").click(() => {
_this.showPageCode("last", pagination);
})
pagination.find("#prePage").click(() => {
_this.showPageCode("sub", pagination);
})
pagination.find("#nextPage").click(() => {
_this.showPageCode("add", pagination);
})
//输入框输入值的事件
pagination.find(".pageTail > input[type='number']").blur(() => {
_this.showPageCode("jump", pagination);
})
//初始化设置选中样式
_this.selectStyle(pagination.find(".pageCode"));
return pagination;
};
this.showPageCode = (operation, $el) => {
//初始化显示
if (!$el) {
let liElement = '';
if (_this.totalPage >= 3) {
for (let i = 0; i < 3; i++) {
liElement = liElement + '<li class="pageItem page"><a>' + (i + 1) + '</a></li>';
}
} else {
for (let i = 0; i < _this.totalPage; i++) {
liElement = liElement + '<li class="pageItem page"><a>' + (i + 1) + '</a></li>';
}
}
return liElement;
}
//改变页显示
let $pageCode = $el.find(".pageCode");
//下一页
if (operation == "add") {
let pageCode = $pageCode.children(":last").find("a").text();
if (pageCode == _this.totalPage) {
return;
}
for (let i = 0; i < 3; i++) {
let page = Number(pageCode) + i + 1;
//如果还有页，则显示，否则不显示
if (page <= _this.totalPage) {
$pageCode.children(":eq(" + i + ")").css("display", "");
$pageCode.children(":eq(" + i + ")").find("a").text(page);
} else {
$pageCode.children(":eq(" + i + ")").css("display", "none");
}
}
//设置当前页
_this.pageNumber = $pageCode.children(":first").find("a").text();
} else if (operation == "sub") {
//上一页
let pageCode = $pageCode.children(":first").find("a").text();
if (pageCode == 0) {
return;
}
if (pageCode - 3 < 0) {
for (let i = 0; i < 3; i++) {
$pageCode.children(":eq(" + i + ")").css("display", "");
$pageCode.children(":eq(" + i + ")").find("a").text(i + 1);
}
return;
}
for (let i = 0; i < 3; i++) {
$pageCode.children(":eq(" + i + ")").css("display", "");
$pageCode.children(":eq(" + i + ")").find("a").text(Number(pageCode) - (3 - i));
}
//设置当前页
_this.pageNumber = $pageCode.children(":first").find("a").text();
} else if (operation == "first") {
//首页
let pageCode = 1;
for (let i = 0; i < 3; i++) {
$pageCode.children(":eq(" + i + ")").css("display", "");
$pageCode.children(":eq(" + i + ")").find("a").text(Number(pageCode) + i);
}
//设置当前页
this.pageNumber = $pageCode.children(":first").find("a").text();
} else if (operation == "last") {
//尾页
let pageCode = _this.totalPage;
// alert("尾页："+pageCode)
if (_this.totalPage >= 3) {
for (let i = 0; i < 3; i++) {
$pageCode.children(":eq(" + i + ")").css("display", "");
$pageCode.children(":eq(" + i + ")").find("a").text(Number(pageCode) - (2 - i));
}
}
//设置当前页
_this.pageNumber = $pageCode.children(":last").find("a").text();
} else if (operation == "jump") {
//跳向指定页
let pageCode = $el.find(".pageTail > input[type='number']").val();
//如果没有值，不设置
if (!pageCode || pageCode == "") {
return;
}
if (pageCode < 3) {
//小于第一页
for (let i = 0; i < 3; i++) {
$pageCode.children(":eq(" + i + ")").css("display", "");
$pageCode.children(":eq(" + i + ")").find("a").text(i + 1);
}
//设置当前页
_this.pageNumber = 1;
} else if (pageCode > _this.totalPage - 3) {
//大于第一页
//设置当前页
if (pageCode >= _this.totalPage) {
_this.pageNumber = _this.totalPage;
} else {
_this.pageNumber = pageCode;
}
pageCode = _this.totalPage;
for (let i = 0; i < 3; i++) {
$pageCode.children(":eq(" + i + ")").css("display", "");
$pageCode.children(":eq(" + i + ")").find("a").text(Number(pageCode) - (2 - i));
}
} else {
//除此之外
//设置当前页
this.pageNumber = pageCode;
for (let i = 0; i < 3; i++) {
if (1 - i > 0) {
$pageCode.children(":eq(" + i + ")").css("display", "");
$pageCode.children(":eq(" + i + ")").find("a").text(Number(pageCode) - Math.abs(1 - i));
} else {
$pageCode.children(":eq(" + i + ")").css("display", "");
$pageCode.children(":eq(" + i + ")").find("a").text(Number(pageCode) + Math.abs(1 - i));
}
}
}
//清空输入框
$el.find(".pageTail > input[type='number']").val("");
}
_this.executionFun = true;
//设置选中样式
_this.selectStyle($pageCode);
};
//设置选中页函数,$el类.pageCode
this.selectStyle = ($el) => {
for (let i = 0; i < 3; i++) {
//表示选中当前页
if ($el.children(":eq(" + i + ")").find("a").text() == this.pageNumber) {
$el.children(":eq(" + i + ")").find("a").css({
"color": "#8dfbfd",
"font-weight": "bold",
});
//选中值之后，可以加载相应的函数进行处理数据
if (_this.executionFun && _this.getFunData) {
_this.getFunData(_this.pageNumber, _this.pageSize);
_this.executionFun = false;
}
} else {
$el.children(":eq(" + i + ")").find("a").css({
"color": "#fff",
"font-weight": "",
});
}
}
};
//刷新数据的方法
this.refreshData = () => {
if (_this.getFunData) {
_this.getFunData(_this.pageNumber, _this.pageSize);
}
};
}
- 图标样式CSS代码
@font-face {
font-family: "iconfont";
src: url('//at.alicdn.com/t/font_2378444_at9qqfg09xv.eot?t=1614238503680'); /* IE9 */
src: url('//at.alicdn.com/t/font_2378444_at9qqfg09xv.eot?t=1614238503680#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAATAAAsAAAAAC9wAAARyAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDXAqKKIgHATYCJAMgCxIABCAFhG0HXxvgCcgOJSGhwGBgIGFgPPy33+/3mZkruCbR6EkskwiJRcITERokSLQIqZC/lvCOcrMJUhFNzQ0qhmxSasFrfuaBUxNIX737ufz694fKWecBm89iQclF6P/stbQTC1TQMYa2ZK1ogGveK0SI5+47Iak9+nkC3eaFwk7yS2vBSKFOC8S1hBSAUcKgVFBDq64Lri3iA7ja9MZ6DODd+/n4D9FhRFJl6j7nV3liyPwV+raVPT4/rjkvAi3cng3jm8jYAArxVOh4xA4SG9i6lw6OszOItZK0rdbUt8VvW+fniYhNkjNSdetakkalRrC1f17UlKIXymWy4VeoxSbxK1VQpCxGp0LZhE6NshmdgrIFnYyyFdEdVLTONYPADIh7gDQKSrXpKdt7iTWPLNUjMo6xuSbMvL0xXzOFZqujY6oYxmlHUrvRgdCsA3i2R+J1ZO6YG28gkt5iZ5dBYhMaO/G6DfaI1mLYiwNBasWsV0q1opKoQVXiatJBAeJDVQNLgnnndSYMw5ud5ev1deO60LoD45c7dbraBM56GaZNK9LZ6H16vR1fu8+ZRa/338vj7T1kytcwxQxTe19XO7DO+rCO4TGMY+263S5szSa/PXV1e/ab1NL6Ir2e/2iWXze0dfmzLSl4W5WVOcn1G87sc91jMX3A3nTfMXUM57+TYSybvtg/i1EUhFRzp6I39i52Xq/tip7iVhvmZnvq/edSULZlY9Dxr8K3XTuu/jD2RKOZ49fPOTuegH3s3Hj4tPfBg0/FHvE0+84dti2lBSOIzo33EH8+dNAmLvfitVZsdBRD2mpgJMavMcQ8csdoKlOa8MOmOZGfVFAOxB6GAxX99kekGcdFW6zZwkRWceG3LK9JwxI3m87m4PzoiY0t7kuVQMo9x1u4dlWrl7poEitjD+3eM8TSyPlE9hBWVjJ5V+i1ZpW/MPOwyeW6aOr6sgHWIHZlZaiqMXK7pUF8emJtAwOHjdBibYijo2EEoPM/C9hGHqmd+0P6xHakv8k72F6pB/kyO+F3cpyrrw/H2ixT/xiZ/nXCPy3KAJHOq8KnguVXgA+BUmPhr8JWoGNYSqzEGNuyGGThpqLuIa3LD5Ar8TPQdMQz7PU2NWMfLFlMVGMRJI05yFoLhELZgEqPTai19qHbugJnj5HfWUvpwpoZIAw6Bkm/b8gGPSEUyhxUxn1BuAaDDXS7CNt79lgKiUmOHAmUSIwLB3CJiOolTLPSxC+vRqSqWyCPiz0aD8kVkjAeFR6ZThegXiTfxgUKNRmtVBI4Iad68PzBy1B3N4VL5VQnEinDO5RKaXJEBFH0ReEiqgdMHJNDBJQQMZzQAJyECKUX4eyuZJL5/moISaWbgLyi75KTB5FTkBweFyVcZANCgaK3Ud9jqVVQI0VTSoyAI8allB64fLEh3TpBwUmLj+qEiCiF6+gQk0oWIfOIporw/at6HukD0E19rI0UOUpUUUcTbXSpHyVkhzKK240IRxCTc4aPMlAggVzUwe2mBOIojkqB5AAAAA==') format('woff2'),
url('//at.alicdn.com/t/font_2378444_at9qqfg09xv.woff?t=1614238503680') format('woff'),
url('//at.alicdn.com/t/font_2378444_at9qqfg09xv.ttf?t=1614238503680') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
url('//at.alicdn.com/t/font_2378444_at9qqfg09xv.svg?t=1614238503680#iconfont') format('svg'); /* iOS 4.1- */
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-right1:before {
content: "\e65e";
}
.icon-left1:before {
content: "\e62c";
}
.icon-right:before {
content: "\e65d";
}
.icon-left:before {
content: "\e65c";
}
.icon-search:before {
content: "\e64a";
}
.icon-load1:before {
content: "\e65b";
}
.icon-user:before {
content: "\e63c";
}
- 使用示例：
//添加页码，一次操作即可
var pagination = null;
var total = 100;
var pageNumber = 1;
var pageSize = 10;
var getList = (pageNumber,pageSize)=>{
//请求后端获取数据
alert("获取数据")
}
if (!pagination) {
//pageNumber,pageSize可指定，也可不指定
pagination= new MyPagination(total,getList,pageNumber,pageSize).initPageComponent();
//指定加入某个div内部
$("#div").append(pagination);
}