jquery 封装的分页插件（包括上一页，下一页，跳转）
pagnation.js
(function (factory) {
if (typeof define === "function" && (define.amd || define.cmd) && !jQuery) {
// AMD或CMD
define(["jquery"], factory);
} else if (typeof module === 'object' && module.exports) {
// Node/CommonJS
module.exports = function (root, jQuery) {
if (jQuery === undefined) {
if (typeof window !== 'undefined') {
jQuery = require('jquery');
} else {
jQuery = require('jquery')(root);
}
}
factory(jQuery);
return jQuery;
};
} else {
//Browser globals
factory(jQuery);
}
}(function ($) {
//配置参数
var defaults = {
total: 0, //数据总条数
pageSize: 10, //每页显示的条数,默认10条
currentPage: 1, //当前第几页
pageCount:0, // 总页数
pagerCount: 7, //设置最大页码按钮数。 页码按钮的数量，当总页数超过该值时会折叠
useJump: false, //是否启动跳转
useTotal:false,// 显示所有条数
callback: function () {} //回调
};
var Pagination = function (element, options) {
//全局变量
var opts = options, //配置
current, //当前页
$document = $(document),
$obj = $(element); //容器
opts.pagerCount = 7;
/**
* 设置总页数
* @param {int} page 页码
* @return opts.pageCount 总页数配置
*/
this.setPageCount = function (page) {
return opts.pageCount = page;
};
/**
* 获取总页数
* 如果配置了总条数和每页显示条数，将会自动计算总页数并略过总页数配置，反之为0
* @return {int} 总页数
*/
this.getPageCount = function () {
return opts.total && opts.pageSize ? Math.ceil(parseInt(opts.total) / opts.pageSize) : opts.pageCount;
};
/**
* 获取当前页
* @return {int} 当前页码
*/
this.getCurrent = function () {
return current;
};
/**
* 填充数据
* @param {int} 页码
*/
this.filling = function (index) {
var html = '';
if(opts.total>0){
current = parseInt(index) || parseInt(opts.currentPage); //当前页码
var pageCount = this.getPageCount(); //获取的总页数
if(current>pageCount){
current = pageCount
}
if(current<=0){
current=1
}
if (opts.useTotal) {
html += "共" + opts.total + "条"
}
if(opts.pagerCount<pageCount){
// 这是表明超过了设置最大页码按钮数
// 1.以当前页码为中心,获取可加减的距离（最大页码按钮数-1）/2，
const stepSize = (opts.pagerCount-1)/2; // 获取步长
let start = 0;
let end = 0;
// 先判断他的起始点
if(pageCount-current>stepSize){
// 如果当前页减去第一页大于步长，那么就以current为中心
if(current-1>stepSize){
start= current-stepSize+1
end = current+stepSize-1
}
// 如果当前页减去第一页小于或等于步长
if(current-1<=stepSize){
start= 1;
end = current + (stepSize-current+1) + stepSize-1
}
}else{
end = pageCount;
if(end-current<stepSize){
if(end-current===0){
start = end -(stepSize*2)+1
} else {
// end-current 获取最后页码到当前页的距离，用来计算剩下的步长
start = current-(stepSize-(end-current))-stepSize+1;
}
} else {
start = current-stepSize+1;
}
}
if(current >1 && current <= pageCount) {
html+= "上一页"
}
// 如果开始大于1，那么就要添加1和省略号
if(start>1){
html+= "1···"
}
for(;start<=end;start++){
html+= current===start? "" + (start)+"" : "" + (start)+""
}
// 如果结束小于总页数，那么就要添加总页数结束和添加省略号
if(end<pageCount){
html+= "···" + pageCount +""
}
} else {
// 这是总页数pageCount小于设置最大页码按钮数opts.pagerCount
for(let s=0;s<pageCount;s++){
html+= current===s+1? "" + (s+1)+"" : "" + (s+1)+""
}
}
if(current < pageCount) {
html+= "下一页"
}
if(opts.useJump){
html+='';
}
}
$obj.empty().html(html);
};
//绑定事件
this.eventBind = function () {
var that = this;
var pageCount = that.getPageCount(); //总页数
var index = 1;
// 点击跳转指定页
$obj.off().on('click', '.s-count', function () {
index = $(this).html()
that.filling(index);
typeof opts.callback === 'function' && opts.callback(that);
});
//输入跳转的页码
$obj.on('blur propertychange', '.s-t-jump', function () {
var $this = $(this);
var val = $this.val();
var reg = /[^\d]/g;
if (reg.test(val)) $this.val(val.replace(reg, ''));
(parseInt(val) > pageCount) && $this.val(pageCount);
if (parseInt(val) === 0) $this.val(1); //最小值为1
that.filling($this.val());
typeof opts.callback === 'function' && opts.callback(that);
});
//回车跳转指定页码
$document.keydown(function (e) {
if (e.keyCode == 13 && $obj.find('.s-t-jump').val()) {
var index = parseInt($obj.find('.s-t-jump').val());
that.filling(index);
typeof opts.callback === 'function' && opts.callback(that);
}
});
// 下一页
$obj.on('click', '.s-next', function () {
current = current + 1
that.filling(current);
typeof opts.callback === 'function' && opts.callback(that);
});
// 上一页
$obj.on('click', '.s-up', function () {
current = current - 1
that.filling(current);
typeof opts.callback === 'function' && opts.callback(that);
});
// 第二个省略号
$obj.on('mouseenter', '.s-sl-two', function () {
$('.s-sl-two').html(">>");
});
// 下一页更多
$obj.on('click', '.s-sl-two', function () {
current = parseFloat($('.s-count').eq("-2").html()) + 2
that.filling(current);
typeof opts.callback === 'function' && opts.callback(that);
});
// 第一个省略号
$obj.on('mouseenter', '.s-sl-one', function () {
$('.s-sl-one').html("<<");
});
// 上一页更多
$obj.on('click', '.s-sl-one', function () {
current = parseFloat($('.s-count').eq("2").html())-6
that.filling(current);
typeof opts.callback === 'function' && opts.callback(that);
});
};
//初始化
this.init = function () {
this.filling(opts.current);
this.eventBind();
};
this.init();
};
$.fn.pagination = function (parameter, callback) {
if (typeof parameter == 'function') { //重载
callback = parameter;
parameter = {};
} else {
parameter = parameter || {};
callback = callback || function () {};
}
// $.extend将两个对象合并
var options = $.extend({}, defaults, parameter);
return this.each(function () {
var pagination = new Pagination(this, options);
callback(pagination);
});
};
}));
cs.html
DOCTYPE html>
<html lang="cn-ZH">
<head>
<meta charset="UTF-8">
<title>pagination.js - 分页title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="../favicon.ico" rel="icon" type="image/x-icon" />
<style>
.s-active{
color: #409EFF !important;
}
.s-span{
display: inline-block;
margin-right:10px;
cursor: pointer;
font-size: 16px;
}
.s-up,.s-next{
font-size: 16px;
}
.s-up:hover,.s-next:hover{
color: #409EFF !important;
}
.s-t-jump{
width:50px;
height:28px;
border:solid 1px #909399;
border-radius: 4px;
font-size: 16px;
text-align: center;
}
input:focus{
outline: none;
}
.s-ts{
-moz-user-select: none; /*mozilar*/
-webkit-user-select: none; /*webkit*/
-ms-user-select: none; /*IE*/
user-select: none;
}
style>
head>
<body>
<div class="wrapper">
<div class="m-style M-box3">div>
div>
<script src="https://www.cwgj.xyz/js/jquery.js">script>
<script src="../assets/js/pagnation.js">script>
<script>
let pageSize = 10, currentPage=1;
$(function () {
getFastModuleItemList()
});
function getFastModuleItemList() {
const info = JSON.parse(Decrypt(localStorage.getItem('MyNote_Login_Info')));
const data = {
fast_module_id: activeId,
name: $(".search-input").val(),
token: info.token,
currentPage: currentPage,
pageSize: pageSize
}
httpGet('FastModule/GetFastModuleItemList', { info: Encrypt(JSON.stringify(data)) }, (res) => {
const datas = JSON.parse(res);
if (datas.result) {
$('.m-pagnation').pagination({
total: datas.data2 && datas.data2.length>0 ? Number(datas.data2[0]['Total']) : 0, //数据总条数
pageSize: pageSize, //每页显示的条数,默认10条
currentPage: currentPage, //当前第几页
pageCount: 0, // 总页数
pagerCount: 7, //设置最大页码按钮数。 页码按钮的数量，当总页数超过该值时会折叠（最好设置7）
useJump: true, //是否启动跳转
useTotal:true, // 显示所有条数
callback: function (value) {
currentPage = value.getCurrent()
getFastModuleItemList()
}
});
} else {
layer.msg(datas.msg, { icon: 5 });
}
})
}
script>
body>
html>