分页功能-用原型链实现配合jq

1 篇文章 0 订阅
1 篇文章 0 订阅

分页功能-用原型链实现配合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>&emsp;&emsp;</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>
		&nbsp;当前
		<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()
    })
}

第一次写博客,勿喷。如有更好的优化,欢迎下方评论

  • 0
    点赞
  • 0
    收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页
评论

打赏作者

苦海无涯,回码是岸

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值