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

最新推荐文章于 2022-07-14 17:39:57 发布
最新推荐文章于 2022-07-14 17:39:57 发布
阅读量163 收藏
点赞数
分类专栏： 前端 jq 原型链 文章标签： 分页 jq 原型链 js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36355974/article/details/96437695
版权
前端 同时被 3 个专栏收录
4 篇文章 0 订阅
订阅专栏
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
    评论
专栏目录
【原型工具XSTAR】Bootstrap之分页元件设置详解
游泳的鱼的专栏
02-24 566
在原型设计中，分页元件会经常用到，如果开发人员使用的是bootstrap样式风格的设计，在绘制原型图时，最好是能使用与其风格一致的原型，这使得在Axure中绘制效果变得复杂。如果有一个能够快速生成分页元件的办法，一定可以让原型设计工作不那么痛苦。 在xstar软件中提供了一套完整的bootstrap原装样式风格的元件库，可以轻松实现分页元件的效果。下面就对分页元件的设置进行讲解。 1. 元件效果 2. 准备工作 功欲善其事，必先利其器。动手之前，先要安装最新版的Xstar软件，我使用的是Xs
在django中使用自定义标签实现分页功能
09-21
主要介绍了在django中使用自定义标签实现分页功能,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
【JS案例】分页器——使用原生JavaScript实现
m0_50785976的博客
07-14 4645
原生js实现分页器功能
一个分页原型实现的细节
weixin_30532369的博客
08-12 178
工作中页面重构,一个分页导航重新设计了下,参考yahoo的那种,原来的不方便用户点击.在测试的过程中,IE6 下发现了一些细节上的问题,下面会稍微说下,主要是做个记录. 这里说点废话,虽然google很霸气的把IE6一脚给"踹"了,但是目前国内的前端还是要兼顾IE6的.不光是年纪大点的人. 年轻人中也有不少,依然的"很不知情"的使用IE6,所以国内的W3C进程,真是任重道远.我觉得我们每个做前端...
仿豆瓣分页原型(Javascript版)
我的地盘—我做主
05-12 131
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;&lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="gb2312" &gt;&lt;head&
自定义功能件--分页
qq564280420的博客
09-05 178
这个介绍的是项目中自己封装的一个分页的方法，用的技术也是构造函数。虽然有很多的分页插件，但是自己也是可以动手写一下的。好了，上代码。 分页的构造函数代码common.js /** * 分页的构造函数 * @param { id:"容器id", pageSize:"每页的数据条数", totalCount:"总数", pageNum:"当前页数", clickChange:"点击切换事件"...
大数据Nifi模板-Mysql数据分页同步-实现了分页功能-MySqlToMySql数据分页实时采集-带分页功能.zip
04-24
1.最近在用大数据处理工具nifi做大数据处理,纯界面化的操作很方便,但是资料少,就这个mysql分页弄了好久,分享出去了 2.如果你用到了点个赞吧,笔者自己弄了好几天,测试过了可以放心用 3.配置好自己需要同步的表,修改...
分页插件--基于jq编写的分页插件
10-19
一个好用的js分页插件，能够较快地实现分页功能。资源中包括，css，js 样例等
----------简易分页实现--------
07-09
基础的简易分页, 利用前后端进行调用 主要为后端pagehelper插件,以及前端的jqPaginator,外加bootstrap
flask-rest-paginate:分页扩展功能可实现烧瓶安宁
05-02
烧瓶其余分页 Flask RESTful的分页扩展。 安装 使用安装扩展 pip install flask-rest-paginate 用法 在您的应用中，按如下所示添加扩展名 from flask import Flask from flask_restful import Api from flask_...
豆瓣网站javascript分页原形
07-26
豆瓣网站javascript分页原形，适合中低手学习！
仿豆瓣分页原型
chiba7938的博客
05-30 138
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www....
html5 ajax 分页,js+ajax如何实现分页组件
weixin_30616309的博客
07-03 270
js+ajax如何实现分页组件发布时间：2021-06-27 15:59:35来源：亿速云阅读：50作者：小新小编给大家分享一下js+ajax如何实现分页组件，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！具体内容如下1.定义分页组件DOM2.定义分页组件类及实例方法：//分页组件类functionPagination(_ref){this.id=_ref.id;//分...
infrared-remote-candroid studiodemo
05-05
android studio下载
【新质生产力】新质生产力赋能智能制造数字化解决方案.pptx
05-05
【新质生产力】新质生产力赋能智能制造数字化解决方案.pptx
基于matlab实现的用于应用布格重力异常数据反演地下异常密度体.rar
05-05
基于matlab实现的用于应用布格重力异常数据反演地下异常密度体.rar
node-v8.10.0-linux-x64.tar.xz
最新发布
05-05
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
vue3如何用 vue-print-nb实现分页打印功能
05-26
Vue3中使用vue-print-nb实现分页打印功能可以按照以下步骤进行： 1. 安装vue-print-nb 使用npm安装vue-print-nb：`npm install vue-print-nb --save` 2. 引入vue-print-nb 在需要使用的组件中引入vue-print-nb：...

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

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值