分享一个简洁的分页插件

最新推荐文章于 2024-02-25 10:59:41 发布
最新推荐文章于 2024-02-25 10:59:41 发布
阅读量671 收藏
点赞数 1
分类专栏： 前端点滴知识 JavaScript点滴知识 文章标签： 分页
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bbsyi/article/details/87811254
版权 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title></title>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0">

    <style>
    	*{
    		padding: 0;
    		margin: 0;
    	}
		
		/*分页图标*/
		@font-face {font-family: "iconfont";
		  src: url('iconfont.eot?t=1542248625101'); /* IE9*/
		  src: url('iconfont.eot?t=1542248625101#iefix') format('embedded-opentype'), /* IE6-IE8 */
		  url('data:application/x-font-woff;charset=utf-8;base64,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') format('woff'),
		  url('iconfont.ttf?t=1542248625101') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
		  url('iconfont.svg?t=1542248625101#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-iconfontjiantou5:before { content: "\e635"; }

		.icon-gengduo1:before { content: "\e625"; }

		.icon-fanhui:before { content: "\e600"; }

		.icon-gengduo:before { content: "\e601"; }

		.icon-guanbi:before { content: "\e7be"; }

		.icon-guanbi1:before { content: "\e611"; }

		.icon-shangyimian:before { content: "\e610"; }

		.icon-xiayimian:before { content: "\e612"; }

		.icon-xiala:before { content: "\e658"; }

		.icon-huhuanx:before { content: "\e64e"; }

		
		/*分页样式*/
    	.page_div {margin-top: 20px;margin-bottom: 20px;font-size: 15px;font-family: "microsoft yahei";color: #999;box-sizing: border-box;clear: both;overflow: hidden;}
		.page_div a {display: inline-block;margin-right: 5px;border-radius: 4px;border: 1px solid #d7d7d7;width: 38px;height: 35px;text-align: center;line-height: 35px;cursor: pointer;color: #999;font-weight: 200;}			
		.page_div .pNum:hover{background: #4091fc;color: #fff !important;border: 1px solid #4091fc !important;}
		.goPage {width: 38px;height: 35px;font-size: 15px;color: #333;line-height: 30px;border: 1px solid #d7d7d7;border-radius: 4px;text-align: center;outline: none;margin: 0 10px;}
		#firstPage{width: 50px;color: #0073A9;border: 1px solid #0073A9!important;}			
		#lastPage {background: #4091fc;width: 60px !important;border: 0;margin-right: 0;color: #fff;}
		#prePage,#nextPage {border-radius: 4px;border: 1px solid #d7d7d7;width: 38px;height: 35px;text-align: center;line-height: 35px;cursor: pointer;color: #999;font-weight: 200;}			
		.page_div .current {background: #4091fc;color: #fff !important;border: 1px solid #4091fc !important;}			
		.totalPages {margin: 0 10px;}
		.totalPages span,.totalSize span {color: #999;margin: 0 5px;}
		.divPage{float: right;}

		.page-s{
			    line-height: 40px;
		}
    </style>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

    <script type="text/javascript">
    	(function($, window, document, undefined) {
			function Paging(element, options) {
				this.element = element;
				this.options = {
					pageNo: options.pageNo || 1,
					totalPage: options.totalPage,
					totalSize: options.totalSize,
					callback: options.callback
				};
				this.init();
			}
			Paging.prototype = {
				constructor: Paging,
				init: function() {
					this.creatHtml();
					this.bindEvent();
				},
				creatHtml: function() {
					var me = this;
					var content = "";
					var current =  (parseInt($(".totalPages .goPage").val()) > 0 ? parseInt($(".totalPages .goPage").val()) : me.options.pageNo);
					var total = me.options.totalPage;
					var totalNum = me.options.totalSize;
					var pageNum = $(".totalPages .goPage").val()
					console.log(total)
					content += "<span class='page-s'>当前第"+current+"页，共"+total+"页，<span><span class='totalSize'> 共<span>" + totalNum + "</span>条记录 </span>";
					content += "<div class='divPage'><a id='prePage' class='pNum'><span class=\"iconfont icon-fanhui\" style=\"position: relative;left: 3px;\"></span></a>";
					if(total > 6) {
						
						if(current < 5) {
							
							for(var i = 1; i < 6; i++) {
								if(current == i) {
									content += "<a class='current pNum'>" + i + "</a>";
								} else {
									content += "<a class='pNum'>" + i + "</a>";
								}
							}
							content += "<a>. . .</a>";
							content += "<a class='pNum'>" + total + "</a>";
						} else {
							if(current < total - 3) {
								content += "<a class='pNum'>1</a>";
								content += "<a>. . .</a>";
								for(var i = current - 2; i < current + 3; i++) {
									if(current == i) {
										content += "<a class='current pNum'>" + i + "</a>";
									} else {
										content += "<a class='pNum'>" + i + "</a>";
									}
								}
								content += "<a>. . .</a>";
								content += "<a class='pNum'>" + total + "</a>";
							} else if(current > total){						
								content += "<a class='pNum'>1</a>";
								content += "<a>. . .</a>";
								for(var i = total - 4; i < total + 1; i++) {
									if(total == i) {
										content += "<a class='current pNum'>" + i + "</a>";
									} else {
										content += "<a class='pNum'>" + i + "</a>";
									}
								}
							} else {
								content += "<a class='pNum'>1</a>";
								content += "<a>. . .</a>";
								for(var i = total - 4; i < total + 1; i++) {
									if(current == i) {
										content += "<a class='current pNum'>" + i + "</a>";
									} else {
										content += "<a class='pNum'>" + i + "</a>";
									}
								}
							}
						}
					} else {
						for(var i = 1; i < total + 1; i++) {
							if(current == i) {
								content += "<a class='current pNum'>" + i + "</a>";
							} else {
								content += "<a class='pNum'>" + i + "</a>";
							}
						}
					}
					content += "<a id='nextPage' class='pNum'><span class=\"iconfont icon-gengduo\" style=\"position: relative;left: -3px;\"></span></a>";
					
					content += "<span class='totalPages'>到第<span><input type=\"text\" class = \"goPage\" width=\"30\" height=\"30\"/></span>页 </span>";
					content += "<a id=\"lastPage\">确定</a>";

					content += "</div>";
					
					me.element.html(content);
				},
				bindEvent: function() {
					var me = this;
					me.element.off('click', 'a');
					me.element.on('click', 'a', function() {
						var num = $(this).html();
						var id = $(this).attr("id");
						if(id == "prePage") {
							if(me.options.pageNo == 1) {
								//me.options.pageNo = 1;
								return;
							} else {
								me.options.pageNo = +me.options.pageNo - 1;
							}
						} else if(id == "nextPage") {
							if(me.options.pageNo == me.options.totalPage) {
								//me.options.pageNo = me.options.totalPage
								return;
							} else {
								me.options.pageNo = +me.options.pageNo + 1;
							}
						} else if(id == "lastPage") {
							
							var pageNum = $(".totalPages .goPage").val()
							if(pageNum < me.options.totalPage && pageNum >= 1){
								me.options.pageNo = pageNum;
							}else if(pageNum < 1){
								me.options.pageNo = 1;
							}else{
								me.options.pageNo = me.options.totalPage
							}
							
						}else {
							if(me.options.pageNo == parseInt(num) || num == '. . .'){
								return;
							}else{
								me.options.pageNo = +num;
							}	
						}
						me.creatHtml();
						if(me.options.callback) {
							me.options.callback(me.options.pageNo);
						}
					});
					me.element.off('keydown', 'input');
					me.element.on('keydown', 'input', function() {				
						var id = $(this).attr("id");
						var num = $(this).html();
						var curkey = event.which;
			            if(curkey == 13){            	
			            	var pageNum = $(".totalPages .goPage").val()
							if(pageNum < me.options.totalPage && pageNum >= 1){
								me.options.pageNo = pageNum;
							}else if(pageNum < 1){
								me.options.pageNo = 1;
							}else{
								me.options.pageNo = me.options.totalPage
							}
			            	
			            	me.creatHtml();
							if(me.options.callback) {
								me.options.callback(me.options.pageNo);
							}
			            	
			            } 
					})
					
				}
			};
			$.fn.paging = function(options) {
				return new Paging($(this), options);
			}
		})(jQuery, window, document);
    </script>


</head>
<body>

	<div class="page_div"></div>


	<script type="text/javascript">
		$('.page_div').paging({
			pageNo: 1,
			totalPage: 10,
			totalSize: 100,
			callback: function(e){
				console.log(e);
				console.log('分页回调')
			}
		});
	</script>
</body>
</html>

 

弹琴弹琴
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
martini-paginate:go-martini web 框架的分页插件
06-01
马提尼酒 go-martini web 框架的分页插件。 安装 将其导入源代码： import ( "github.com/timothyye/martini-paginate" ) 然后获取包和源代码： go get 用法 将分页器的处理程序设置为中间件： m = martini . Classic () m . Get ( "/casts" , paginate . Handler , HandleCasts ) 在处理函数中，用页面大小初始化分页器并记录总量： func HandleCasts ( r render. Render , db * mgo. Database , pager * paginate. Paginator ) { num , _ := db . C ( "casts" ). Count () pers := 6 pager . In
jQuery Pagination分页插件
06-10
Pagination是一款简洁实用的jQuery分页插件代码，提供多种数据源方式，众多的配置参数，回调函数，显示控制等，还提供了5套内置的分页条皮肤。
js 简易的分页器插件
weixin_30564901的博客
12-29 92
1.自己引入jquery插件，我的demo是引入的自己本地的query <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style ...
通过go自定义一个分页插件
最新发布
本郡主是喵
02-25 638
嗯...也不能叫做分页插件,就是一个分页工具类。
微信小程序顶部导航栏样式设置（自定义）
热门推荐
dqzd12345的博客
10-23 2万+
效果： 一、要用自定义的导航栏需要在app.json中配置（必须） 取消自带的导航栏："navigationStyle": "custom" 目前微信小程序不支持单个页面设置，一旦在要决定使用自定义导航栏，那么每个页面都需要设置，为了方便我就将其写成了一个组件： 二、目录结构 1、navbar.wxml文件： <view class='nav-wrap' st...
阿里巴巴字体图标使用
weixin_30701521的博客
07-19 420
1、登录阿里巴巴字体图标库http://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2 2、在图标库中选择需要的图标，鼠标经过该图标加入购物车 3、选择完成后 点击右上角购物车--》添加到对应项目 4、图标管理--》我的图标--》我的项目--》选择对应项目--》更多操作--》编辑项目--》添加协作者，则该项目中的所有人...
Go项目实战—开发完善分页插件（易扩展方式)【goshop开源项目 | 20220424更新】
LW1314QS的博客
04-28 527
goshop开源项目的更新 备注：前面项目中用到的代码已经分享到GitHub/Gitee中去了，并且以后所有项目中会出现的代码都会提交上去，欢迎查阅。 地址 goshop 感兴趣的可以点个star哦~ goshop开源项目的更新 今天在考虑怎么实现数据分页和检索功能： 通过传入页数(page)，分页条数(pageSize) ，实现数据的 limit 分页功能 动态支持检索条件和排序的功能 接下来咱们就来实现以上功能 首先需要先封装一个 Paginate 的扩展用于对gorm操作时引用Off
Go使用MongoDB——Qmgo框架
Harris-H的博客
10-03 1415
Go使用MongoDB——Qmgo框架
自己常用的一款插件分页
qq_42462993的博客
06-22 268
自己常用的一款插件分页
简单分页插件
05-24
简单的分页小插件。。。。。。。。。。。。。。。。。。。。。。。。
SelectPage下拉分页插件 v2.14
11-27
SelectPage下拉分页插件是一个简洁而强大的下拉分页选择器；支持远程数据（AJAX）、 autocomplete、键盘快速导航操作、分页展示、多选标签、i18n国际化支持等多功能的选择器插件。 功能
go-paginator:在Golang中实现分页的一种简单方法
05-27
分页器 一种在Golang中实现分页的简单方法。 用法 package main import ( "fmt" "github.com/vcraescu/go-paginator/v2" "github.com/vcraescu/go-paginator/v2/adapter" "gorm.io/driver/sqlite" "gorm.io/gorm" "time" ) type Post struct { ID uint `gorm:"primary_key"` Title string Body string PublishedAt time. Time } func main () { db , err := gorm . Open ( sqlite . Open ( "fil
移动端翻页插件dropload.js（支持Zepto和jQuery）
12-02
dropload.js提供了最基本的上拉翻页，下拉刷新功能。对于由服务端一次返回所有数据的情况基本通用。 但是，需求往往不是服务端一次性返回所有数据，往往还要支持服务端分页，搜索，排序，多条件筛选等功能。（比较类似美团美食的界面） 一、解决方案 改进1：由于有分页，搜索，排序，多条件筛选功能，可能都不需要上拉，进到页面就没有数据。 例如：搜索一个服务端不存在的名字。 所以，添加接口设置setHasData。  MyDropLoad.prototype.setHasData = function(ishasData) { var me = this; if (ishasData) {
Go-Go的MongoDB驱动
08-13
Go的MongoDB驱动
go-paginator:生成分页链接标题的小助手
04-13
分页器 生成分页链接标题的小助手
golang实现分页算法实例代码
09-20
主要给大家介绍了关于golang实现分页算法的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
简单实用的jquery分页插件
06-10
一个非常简洁漂亮的分页插件效果，附件里提供了三个效果，可供给懒人分享使用。代码简洁，使用方法简单： 1、在网页head中调用两个CSS文件 2、将你需要分页的部分拷贝过去即可 3、在网页结束的底部调用jquery库...
SelectPage下拉分页插件源代码
03-18
SelectPage下拉分页插件是一个简洁而强大的下拉分页选择器；支持远程数据（AJAX）、 autocomplete、键盘快速导航操作、分页展示、多选标签、i18n国际化支持等多功能的选择器插件。 功能特点： 基于jQuery 兼容...
viewer.js图片预览插件(案例含jquery分页插件)
cai niaoyihao_的博客
04-15 5191
viewerJS图片预览插件，实现图片放大、切换、拖动等预览效果
mybatis-plus分页插件特点
08-18
1. **简单易用**：MyBatis-Plus分页插件提供了简洁的API，使用起来非常方便，无需编写繁琐的分页查询语句。 2. **灵活配置**：插件支持多种分页方式，可以根据需求选择适合的分页方式，如基于物理分页或基于游标的...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值