分页功能-用原型链实现配合jq
鉴于昨天需要实现分页，网上搜了下结果不是有很理想的插件，于是呢
案例如图： 此项目方便的时直接引入css样式 js 然后使用 new 一个对象即可，易扩展，注释详细
主页代码 index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我是分页</title>
<!-- 引入分页插件开始 -->
<link rel="stylesheet" href="./style.css">
<script src="./index.js"></script>
<!-- 引入分页插件结束-->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
<!-- 测试数据 -->
<div align="center">
选择对应的项：
<select id="limit" onchange="getDataList()">
<option value ="10">10</option>
<option value ="15" selected="selected">15</option>
<option value ="30">30</option>
<option value ="50">50</option>
</select>
<span> </span>
输入总数量：
<input id="numAll" type="number" onchange="getDataList()" value="60" placeholder="请输入当前页,默认为100"/>
<button onclick="getDataList()">查看效果</button>
</div>
<!-- 盒子内容节点dom 必须 -->
<div class="fenYeContent">
<!-- 左边的显示,文字提示 -->
<div class="fenYeContent-text">当前显示的是： 第<span class="minLimit">1</span>项到<span class="maxLimit">11</span>项。（当前所选的是每页<span class="numLimit">25</span>项）</div>
<!-- 右边的分页 -->
<div class="fenYeContent-list">
<!-- 上一页 -->
<span class="fenYeContent-list-button previous" >上页</span>
<!-- 渲染dom 原理相当于在这里进行渲染dom-->
<span class="fenYeContent-list-box">
<span class="fenYeContent-list-button click" data-index="1">1</span>
<span class="fenYeContent-list-button" data-index="2">2</span>
<span class="fenYeContent-list-button" data-index="2">3</span>
<span class="fenYeContent-list-button" data-index="2">4</span>
<span class="fenYeContent-list-button" data-index="2">5</span>
<span class="fenYeContent-list-button more" data-index="">...</span>
<span class="fenYeContent-list-button" data-index="130">130</span>
</span>
<!-- 下页 -->
<span class="fenYeContent-list-button next">下页</span>
当前
<input class="fenYeContent-page" type="number" min="1" value="1" placeholder=""/>
页
</div>
</div>
<script>
window.param = { // 匹配数据
limit : 10,
start: 0,
page:1
}
var Pagination;
Pagination = new Pagination({
limitNum: 100,
param: param, // 必填
viewFun: getDataList ,// 点击对应的操作进行请求渲染函数,必须 需要扩展 getDataList 函数去改变对应的请求状态 // 必填
keyParam: 'param', // 对应需要改变外部的参数变化 // 必填
parentSkin: 'fenYeContent', // 根元素类名 // 必填
qingQiuStatus: false, // 是否在请求中 限制用户频繁点击 需要扩展 getDataList 函数去改变对应的请求状态
qingQiuFun: function(){console.log('正在加载数据中，请稍后')},// 加载数据中的用户点击的回调函数
previousFun: function(){console.log('当前已经是第一页了')},// 被拒上一页的回调函数
nextFun: function(){console.log('当前已经是最后一页了')},// 被拒下一页的回调函数
pageFun: function(){console.log('不能点击相同页')},// 被拒当前的回调函数
maxFun: function(){console.log('不能选择超过最大页')} // 被拒最大页的回调函数
//pageListNum: 2, // 间隔
//pageMaxNum: 5 ,// 最大渲染数量
//skin: '' , // 按钮自定义类名
//minBool: true, // 是否显示最小页
//maxBool: true, // 是否显示最大页
});
// 初始化分页信息
getDataList();
// 获取数据参数
function getDataList(){
Pagination.setQingQiuStatus(false)
Pagination.view($(".fenYeContent-page").val(), $("#limit").val(), $("#numAll").val())
}
/**
* 改变外部参数 重写扩展函数
*/
Pagination.expansion = function(){
}
</script>
</body>
</html>
样式style.css
.fenYeContent {
background:#eee;
font-size:14px;
margin-top: 20px;
-moz-user-select:none;/*火狐*/
-webkit-user-select:none;/*webkit浏览器*/
-ms-user-select:none;/*IE10*/
-khtml-user-select:none;/*早期浏览器*/
user-select:none;
}
.fenYeContent .fenYeContent-text {
float: left;
}
.fenYeContent .fenYeContent-text span {
color:red;
font-weight: 600;
}
.fenYeContent .fenYeContent-list {
float: right;
}
/* 分页按钮 */
.fenYeContent .fenYeContent-list .fenYeContent-list-button{
border:1px solid #999;
border-radius:3px;
display: inline-block;
height:26px;
line-height: 26px;
padding:0 10px;
margin:0;
color:#000;
background:#fefefe;
cursor: pointer;
transition: all .4s;
}
/* 更多, 禁止按钮 */
.fenYeContent .fenYeContent-list .more {
background:#eee;
color:#999;
border-color:#eee;
cursor: no-drop;
}
.fenYeContent .fenYeContent-list .fenYeContent-list-button.more:hover{
background:#f0f0f0;
color:#999;
}
.fenYeContent .fenYeContent-list .click {
background:cornflowerblue;
color:#fff;
border-color:cornflowerblue;
}
.fenYeContent .fenYeContent-list .fenYeContent-list-button:hover {
background:cornflowerblue;
color:#fff;
}
/* 分页输入框 */
.fenYeContent-page {
border:1px solid #999;
border-radius: 3px;
height:24px;
line-height: 24px;
width:40px;
text-indent: 10px;
}
class 分页 index.js
/**
* 分页的类
*/
function Pagination(_option) {
this.option = _option;
this.init();
}
/**
* 初始化 上一页，下一页的点击事件 第二是绑定的事件回调
*/
Pagination.prototype.init = function(){
var self = this;
// 上一页
$("."+this.option.parentSkin+"-list-button.previous").click(function(){
if ($(this).hasClass('more')){
return typeof self.option.previousFun == 'function' ? self.option.previousFun() : layer.msg('已经是第一页了',{icon:2})
}
if (self.option.qingQiuStatus) {
return typeof self.option.qingQiuFun == 'function' ? self.option.qingQiuFun() : layer.msg('正在加载数据中，请稍后',{icon:2});
}
if (self.option.param.page > 1) {
self.option.param.page--;
self.setParam()
}
})
// 下一页
$("."+this.option.parentSkin+"-list-button.next").click(function(){
if ($(this).hasClass('more')){
return typeof self.option.nextFun == 'function' ? self.option.nextFun() : layer.msg('已经是最后一页了',{icon:2})
}
if (self.option.qingQiuStatus) {
return typeof self.option.qingQiuFun == 'function' ? self.option.qingQiuFun() : layer.msg('正在加载数据中，请稍后',{icon:2});
}
self.option.param.page++;
self.setParam()
})
// 分页
$("."+this.option.parentSkin+ " .fenYeContent-page").on('change',function(){
var index = $(this).val() - 0
if (self.option.param.page == index) {
$(this).val(index)
return typeof self.option.pageFun == 'function' ? self.option.pageFun() : layer.msg('不能选择相同页',{icon:2});
}
if (self.option.len < index) {
$(this).val(self.option.len)
index = self.option.len
}
if (self.option.qingQiuStatus) {
return typeof self.option.qingQiuFun == 'function' ? self.option.qingQiuFun() : layer.msg('正在加载数据中，请稍后',{icon:2});
}
self.option.param.page = index;
self.setParam()
})
}
/**
* 扩展函数， 重写此函数即可，每次点击按钮改变分页值时会调用
*/
Pagination.prototype.expansion = function(){
}
/**
* 改变 分页必须的数据
*/
Pagination.prototype.setValue = function(page, limit, limitNum){
this.option.param.page = page
this.option.param.limit = limit
this.option.limitNum = limitNum
}
/**
* 改变内部请求状态
*/
Pagination.prototype.setQingQiuStatus = function(value){
this.option.qingQiuStatus = value;
}
/**
* 改变外部参数,改变对应的分页
*/
Pagination.prototype.setParam = function(){
// 渲染第几页
$("."+this.option.parentSkin+ " .fenYeContent-page").val(this.option.param.page)
this.option.qingQiuStatus = true
if (window[this.option.keyParam].page) {
window[this.option.keyParam].page = this.option.param.page;
}
this.expansion()
this.option.viewFun()
}
/**
* 渲染开始
*/
Pagination.prototype.view = function(page, limit,limitNum){
this.setValue(page, limit,limitNum)
var self = this;
var option = this.option;
var limitNum = option.limitNum ? option.limitNum : 10; // 获取总数据量
var param = option.param ? option.param : {page: this.option.param.page, limit: this.option.param.limit}; // 参数 分页 , 数量
var pageListNum = option.pageListNum ? option.pageListNum : 2 // 间隔
var pageMaxNum = option.pageMaxNum ? option.pageMaxNum : 5 // 最大数量
var parentSkin = option.parentSkin ? option.parentSkin : 'fenYeContent'
var skin = option.skin ? option.skin : null; // 按钮自定义类名 按钮
var minBool = option.minBool ? option.minBool : true; // 显示最小页
var maxBool = option.maxBool ? option.maxBool : true; // 显示最大页
// 获取最大分页值
var len = Math.ceil(limitNum/param.limit)
this.option.len = len;
// 第1项
var minLimit = (param.page - 1) * param.limit +1
// 第n项
var maxLimit = (param.page* param.limit +1) <= limitNum ? (param.page* param.limit +1) : limitNum
// 判断错误的分页
var errBool = false;
if (len < param.page && param.page > 1) {
errBool = true;
}
var pageHtml = ``;
if (!errBool) {
var i = param.page - pageListNum > 1 ? param.page - pageListNum : 1;
var num = 0;
// 判断显示最小页
if (minBool && param.page - pageListNum > 2) {
if ( param.page - pageListNum == 3 ) {
pageHtml += `
<span class="${parentSkin}-list-button" data-index="1">1</span>
<span class="${parentSkin}-list-button" data-index="2">2</span>
`
}else{
pageHtml += `
<span class="${parentSkin}-list-button" data-index="1">1</span>
<span class="${parentSkin}-list-button more" data-index="">...</span>
`
}
}
for (;i<= len;i++) {
if (i > len || num == pageMaxNum) {
break;
}
pageHtml += `
<span class="${parentSkin}-list-button ${i == param.page ? 'click' : ''}" data-index="${i}">${i}</span>
`
num++;
}
// 判断是否显示最大页
if (maxBool && num == pageMaxNum && len - param.page > pageListNum) {
pageHtml += `
<span class="${parentSkin}-list-button more" data-index="">...</span>
<span class="${parentSkin}-list-button" data-index="${len}">${len}</span>
`
}
}else{
param.page = 1;
len = 1;
minLimit = -1
maxLimit = -1
pageHtml += `
<span class="${parentSkin}-list-button" data-index="1" >初始页</span>
`
this.option.param.page = 1
}
$("."+parentSkin+"-list-box").html(pageHtml)
if (skin) {
$("."+parentSkin+"-list-button").addClass(skin)
}
// 判断是否上页可用
if (param.page == 1) {
$("."+parentSkin+"-list-button.previous").addClass('more')
}else{
$("."+parentSkin+"-list-button.previous").removeClass('more')
}
// 判断是否下页可用
if (param.page == len) {
$("."+parentSkin+"-list-button.next").addClass('more')
}else{
$("."+parentSkin+"-list-button.next").removeClass('more')
}
// 渲染第1项 - 第11项
$("."+parentSkin + " .minLimit").text(minLimit)
$("."+parentSkin + " .maxLimit").text(maxLimit )
$("."+parentSkin + " .numLimit").text(param.limit)
// 渲染第几页
$("."+parentSkin+ " .fenYeContent-page").val(param.page)
// 绑定点击对应的分页事件
$("."+parentSkin+"-list-box " +"."+parentSkin+"-list-button").click(function(){
var index = $(this).attr('data-index')
if (index < 1) {
return ;
}
if (self.option.qingQiuStatus) {
return typeof self.option.qingQiuFun == 'function' ? self.option.qingQiuFun() : layer.msg('正在加载数据中，请稍后',{icon:2});
}
self.option.param.page = index;
// 渲染第几页
self.setParam()
})
}
第一次写博客，勿喷。如有更好的优化，欢迎下方评论
