分页插件3-指定到某一页

最新推荐文章于 2020-09-24 09:30:00 发布
最新推荐文章于 2020-09-24 09:30:00 发布
阅读量174 收藏 1
点赞数 1
分类专栏： 第三方-分页
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dongsdh/article/details/94599444
版权

前言--页数多了以后需要指定到某一页（只做了功能，样式没有细调）
html

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<title>分页</title>
	<style type="text/css">
		.pages{text-align: center;}
		.page_div {
				margin-top: 20px;
				margin-bottom: 20px;
				font-size: 15px;
				font-family: "microsoft yahei";
				color: #666666;
				margin-right: 10px;
				padding-left: 20px;
				box-sizing: border-box;
			}
			/*
			 * 页数按钮样式
			 */
			
			.page_div a {
				min-width: 40px;
				border: 1px solid #E3E3E3;
			    height: 40px;
			    text-align: center;
			    margin: 0 4px;
			    cursor: pointer;
			    line-height: 40px;
			    border-radius: 4px;
			    font-size: 13px;
			    display: inline-block;
			}
			.page_div a:hover{
				background: #008C5F;
				color: #fff;
			}
			
			#firstPage,
			#lastPage {
				width: 50px;
				/*color: #0073A9;*/
				/*border: 1px solid #0073A9!important;*/
			}
			
			#prePage,
			#nextPage {
				width: 70px;
				/*color: #0073A9;*/
				/*border: 1px solid #0073A9!important;*/
			}
			.page_div .pagegotos{
				width: 30px;
			    vertical-align: middle;
			    margin: 0 4px;
			    height: 20px;
			    line-height: 20px;
			    padding-left: 3px;
			    outline: none;
			    border-radius: 3px;
    			border: 1px solid #ddd;
			}
			.page_div .pagegotucur{
				font-weight: normal;
			    cursor: pointer;
			    background: #1A64FF;
			    color: #fff;
			    display: inline-block;
			    vertical-align: middle;
			    height: 24px;
			    line-height: 24px;
			    padding: 0 5px;
			    border-radius: 3px;
			}
			.page_div .pagegotucur:hover{opacity: .8;}
			.page_div .current {
				    background-color: #008C5F;
				    border-color: #0073A9;
				    color: #FFFFFF;
			}
			
			.totalPages {
				margin: 0 10px;
			}
			
			.totalPages span,
			.totalSize span {
				color: #0073A9;
				margin: 0 5px;
			}
			input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

input[type="number"] {
    -moz-appearance: textfield;
}
	</style>
</head>
<body>
	<p>分页</p>
	<!--分页-->
	<div class="pages">
		<div value="1 0"></div>
		<div id="pagesd" class="page_div"></div>
	</div>
	<script src="jquery.min.js"></script>
	<script src="paging.js"></script>
	<script type="text/javascript">
		
//		$("#page").paging({
//			pageNo:1,
//			totalPage: 1,
//			callback: function(num) {
//				console.log(num)
//			}
//		})
		$("#pagesd").paging2({
			pageNo:1,
			totalPage: 15,
			totalSize:500,
			callback: function(num) {
				console.log(num)
			}
		})
		
//		setTimeout(function(){
//			$("#page").paging({
//				pageNo:14,
//				totalPage: 30,
//				totalSize:500,
//				callback: function(num) {
//					console.log(num)
//				}
//			})
//		},2000)
		
		
		
		/*
		// 模拟ajax数据用以下方法
		//参数为当前页
		ajaxTest(1);
		
		function ajaxTest(num) {
			$.ajax({
				url: "table.json",
				type: "get",
				data: {},
				dataType: "json",
				success: function(data) {
					console.log(data);
					//分页
					$("#page").paging({
						pageNo: num,
						totalPage: data.totalPage,
						totalSize: data.totalSize,
						callback: function(num) {
							ajaxTest(num)
						}
					})
				}
			})
		}
		*/
	</script>
</body>
</html>

paging.js

(function($, window, document, undefined) {
	//定义分页类
	function Paging2(element, options) {
		this.element = element;
		//传入形参
		this.options = {
			pageNo: options.pageNo||1,
			totalPage: options.totalPage,
			totalSize:options.totalSize,
			callback:options.callback
		};
		//根据形参初始化分页html和css代码
		this.init();
	}
	//对Paging的实例对象添加公共的属性和方法
	Paging2.prototype = {
		constructor: Paging2,
		init: function() {
			this.creatHtml();
			this.bindEvent();
		},
		creatHtml: function() {
			var me = this;
			var content = "";
			var current = me.options.pageNo;
			var total = me.options.totalPage;
			var totalNum = me.options.totalSize;
			content += "<span class='totalSize'> 共<span>"+totalNum+"</span>条 </span>";
			content += "<a id=\"firstPage\">首页</a><a id='prePage'>上一页</a>";
			//总页数大于6时候
			if(total > 6) {
				//当前页数小于5时显示省略号
				if(current < 5) {
					for(var i = 1; i < 6; i++) {
						if(current == i) {
							content += "<a class='current'>" + i + "</a>";
						} else {
							content += "<a>" + i + "</a>";
						}
					}
					content += ". . .";
					content += "<a>"+total+"</a>";
				} else {
					 //判断页码在末尾的时候
					if(current < total - 3) {
						for(var i = current - 2; i < current + 3; i++) {
							if(current == i) {
								content += "<a class='current'>" + i + "</a>";
							} else {
								content += "<a>" + i + "</a>";
							}
						}
						content += ". . .";
						content += "<a>"+total+"</a>";
					//页码在中间部分时候	
					} else {
						content += "<a>1</a>";
						content += ". . .";
						for(var i = total - 4; i < total + 1; i++) {
							if(current == i) {
								content += "<a class='current'>" + i + "</a>";
							} else {
								content += "<a>" + i + "</a>";
							}
						}
					}
				}
				//页面总数小于6的时候
			} else {
				for(var i = 1; i < total + 1; i++) {
					if(current == i) {
						content += "<a class='current'>" + i + "</a>";
					} else {
						content += "<a>" + i + "</a>";
					}
				}
			}
			
			content += "<a id='nextPage'>下一页</a>";
			content += "<a id=\"lastPage\">尾页</a>";
			content += '<span>到</span><input class="pagegotos" type="number"/><span>页</span> <b class="pagegotucur">确定</b>';
			if(total>1){
				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;
					} 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
					} else {
						me.options.pageNo = +me.options.pageNo + 1;
					}
 
				} else if(id =="firstPage") {
					me.options.pageNo = 1;
				} else if(id =="lastPage") {
					me.options.pageNo = me.options.totalPage;
				}else{
					me.options.pageNo = +num;
				}
				me.creatHtml();
				if(me.options.callback) {
					me.options.callback(me.options.pageNo);
				}
			});
			me.element.on('click', '.pagegotucur', function() {
				var pageval =$('.pagegotos').val();
				if(pageval == 'NaN' || pageval<1 ){
					return false;
				}
				var num = pageval;
					me.options.pageNo = +num;
				me.creatHtml();
				if(me.options.callback) {
					me.options.callback(me.options.pageNo);
				}
			});
		}
	};
	//通过jQuery对象初始化分页对象
	$.fn.paging2 = function(options) {
		return new Paging2($(this), options);
	}
})(jQuery, window, document);

效果

dongsdh
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
jq分页插件
qq_39548647的博客
07-18 559
html： &lt;div id="page1" class="page_div"&gt;&lt;/div&gt; css： &lt;style type="text/css"&gt;             /* * 外层div样式，按需更改 */                          .page_div {                 margin-top: 20px; ..
分页插件示例
幸福有多远
05-10 746
前言： <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <title>分页</title> <style type="text/css"> .pages{text-align: center;} .page_div ...
jquery实现滑动到底部加载下一页的数据
风动我不动的博客
07-19 1152
本文主要介绍了jQuery滑动到底部加载下一页数据的实例代码,需要的朋友可以参考下，希望能帮助到大家。（主要是自己想记录下，下次自个儿用好找点。实诚脸） 具体实现代码如下。 html文件 &lt;body&gt;         &lt;!-- 列表 --&gt;         &lt;div id="list"&gt;&lt;/div&gt;     &lt;/body&gt;    ...
jPages插件分页时要注意的一个细节
taomengxing的博客
06-12 498
当我们使用jPages插件进行分页时，如果所要分页的内容是动态生成的，一定要注意以下一点：分页的函数一定要在动态生成的内容的代码下面，因为动态生成内容再将其进行分页有个先后顺序。...
使用 Paging 3 实现分页加载
谷歌开发者
09-24 1423
作者 / Florina MuntenescuPaging 库可以帮助您优雅地渐进加载大型数据集合，同时也可以减少网络的使用和系统资源的消耗。基于您的反馈我们得知，Paging 2.0 ...
纯js实现分页 可跳转指定页
09-18
简单好用的分页插件原生JS，可跳转指定页， 可自定义样式
013-MyBatis分页插件-PageHelper1
08-03
// 第一页，每页显示10条记录 List<Student> students = studentMapper.findByUserName(userName); return new PageInfo(students); } ``` E. **控制器层**：在`StudentController`中接收前端请求，调用服务...
jQuery打印指定区域Html页面并自动分页
10-25
在这种情况下，`jQuery.PrintArea.js`插件提供了一个解决方案，它允许我们指定要打印的区域，并且能够自动进行分页。这个插件特别适用于那些内容较多、需要跨多页打印的场景。 使用`jQuery.PrintArea.js`的基本步骤...
基于Datatables跳转到指定页的简单实例
08-28
但是，在某些情况下，我们需要实现跳转到指定页的功能，例如在列表页中跳转到某一页以方便用户快速定位目标记录。 Datatables跳转到指定页的实现思路 --------------------------- Datatables提供了page()方法来...
Mybatis-plus分页插件的使用
11-26
查询完成后，可以通过`Page`对象的`getRecords()`获取当前页的数据，`getPages()`获取总页数，`getTotal()`获取总记录数，`hasNext()`和`hasPrevious()`分别检查是否还有下一页和上一页。 3. **实战应用**： 在...
MyPager js简单分页控件
weirhp的专栏
09-04 2374
<br />花了点时间做了一个简单的Js分页控件.<br />使用方法如下:<br />一.基本的用法<br /><script type="text/javascript"><br />     new MyPager(15,10,1).init();<br />  /**<br />   第一个参数表示总记录数，例如查询学生，查询到的学生总数<br />   第二个参数表示分页大小 ，每页多少个学生<br />   第三个参数表示当前是第几页<br />  **/<br />    </script><
pagination, paging, 分页，分页查询，hibernatPage，Page
zzuizui
05-18 445
本来想找一下“分页”这个词对应的比较地道的英语说法，没想到找到这篇文章。呵呵，得来全不费功夫。
LigerUI中通过加载服务端数据进行表格的分页显示
weixin_33794672的博客
04-24 204
前言：我的这一篇文章是紧接着上一篇关于LigerUI的文章（http://www.zifangsky.cn/379.html）写的，因此在这里我就省略了相关的环境搭建，直接进入正题一 介绍在LigerUI中显示表格是用的ligerGrid，同时我们可以通过配置url参数就可以加载远程数据并显示成表格形式。不仅如此，ligerGrid还可以进行数据的排序和分页显示：（1）排序：...
Jetpack Paging3 基本使用
AndroidKt
08-02 5452
Paging3 Paging3，是Jetpack提供给开发者用来显示本地或者网络数据集的分页库。针对这类场景，传统的做法是用RecyclerView的加载更多来实现分页加载，很多逻辑需要自行处理且不一定完善。Paging3相当于是官网提供的一套解决方案。 特点 每一页的数据会缓存至内存中，以此保证处理分页数据时更有效的使用系统资源 内置请求重复数据删除功能，确保应用有效地使用网络带宽和系统资源 支持Kotlin协程、Flow、LiveData以及RxJava 内置错误处理支持，如刷新和重试功能。 逻
web简易下滑分页加载器(Function)
weixin_30389003的博客
02-03 93
//分页加载器 function pagingLoad(options) { //分页加载 if (!document.getElementById('load_txt')) { this.loadTxt = document.createElement('div'); loadTxt.id = "load_txt"; loadTxt.style.textAlign = "cente...
自定义Bootstrap-Table扩展——分页跳转到指定页码
JAVA_HIGHNESS的专栏
01-20 2万+
Bootstrap-Table是一个非常棒的基于 Bootstrap 的 jQuery 表格插件，但一开始分页组件不支持跳转到指定页码，所以就打算自己扩展一下。官方源码地址： https://github.com/wenzhixin/bootstrap-table下面就是扩展的js代码，里面关键地方都加了注释，相信懂点js的人一眼就能看明白。bootstrap-table-pagejump.js(f
简单实用的jQuery分页插件
xiaozhen0610的博客
08-27 345
在做商城和订单管理的时候，常常会用到分页功能，所以我封装了一个jQuery的分页插件，该插件主要实现上下翻页，输入数字跳转等功能。 具体实现如下： 输入参数需要当前页码pageNo，总页码totalPage，回调函数callback。 　　主要的实现有两个函数，一个是根据当前页和总页数生成相应的html的代码，一个是事件绑定及回调函数的执行。 creatHtml函数： creatHtml:function(){ var me=this; var cont...
手把手教你如何玩转插件：分页插件（Pagehelper）
热门推荐
Cs_hnu_scw的博客
06-17 5万+
情景引入：小白：起床起床，，，快起床！！！我：怎么怎么了，小白你到底又怎么了。。小白：我发现在Web系统中，分页是一种很常见的功能，可是，我之前写的方法都比较麻烦，移植性不是很高，有没有什么好办法可以快速实现分页的呢？我：确实是的，分页功能几乎在每个系统中都是存在的，它的实现也是有很多种方式的。小白：对呀，有没有什么好方法呢？我：这个嘛，对于分页来说的话，其实我们在复杂的系统中，有很多特别的处理，...
mybatis-plus分页插件配置
最新发布
06-28
### 回答1： Mybatis-Plus分页插件可以通过以下步骤进行配置： 1. 在pom.xml文件中添加依赖： ```xml <dependency> <groupId>com.baomidou</groupId> <artifactId>mybatis-plus-boot-starter</artifactId> <version>3.4.3.1</version> </dependency> ``` 2. 在Mybatis的配置文件中添加分页插件： ```xml <plugins> <plugin interceptor="com.baomidou.mybatisplus.extension.plugins.PaginationInterceptor"> <property name="dialectType" value="mysql"/> </plugin> </plugins> ``` 其中，dialectType属性指定了数据库的方言类型，例如mysql、oracle等。 3. 在Mapper接口中添加分页方法： ```java List<User> selectUserPage(Page<User> page, @Param("username") String username); ``` 其中，Page是Mybatis-Plus提供的分页对象，可以通过它设置分页参数，例如当前页码、每页显示数量等。 4. 在Service层中调用分页方法： ```java Page<User> page = new Page<>(1, 10); List<User> userList = userService.selectUserPage(page, "张三"); ``` 其中，第一个参数是当前页码，第二个参数是每页显示数量。 以上就是Mybatis-Plus分页插件的配置方法。 ### 回答2： MyBatis-Plus是一个优秀的ORM框架，提供了丰富的功能插件。其中，分页插件是使用MyBatis-Plus开发项目的常用功能之一。本文将介绍如何配置MyBatis-Plus分页插件。 1. 引入MyBatis-Plus分页插件依赖 在Maven中，我们可以通过添加以下依赖来引入MyBatis-Plus分页插件： ``` <dependency> <groupId>com.baomidou</groupId> <artifactId>mybatis-plus-boot-starter</artifactId> <version>latest-version</version> </dependency> ``` 2. 配置分页插件 Mybatis-Plus分页插件的配置一般是通过在配置文件中进行定义的。我们可以在`application.properties`中添加以下配置项来开启分页插件： ``` # 开启分页插件 mybatis-plus.pagehelper.enable=true ``` 当然，如果你不喜欢默认的分页插件，你也可以通过以下方法自定义自己的分页插件： ```java @Configuration public class MybatisPlusConfig { @Bean public PaginationInterceptor paginationInterceptor() { PaginationInterceptor paginationInterceptor = new PaginationInterceptor(); return paginationInterceptor; } } ``` 3. 执行分页查询 完成以上配置后，我们就可以在代码中使用分页查询了。在Mapper中，我们可以通过继承`BaseMapper`接口来使用MyBatis-Plus的通用Mapper，其中包含`selectPage`方法： ``` public interface UserMapper extends BaseMapper<User> { /** * 分页查询用户列表 * * @param page 分页信息 * @param user 查询条件 * @return 用户列表 */ IPage<User> selectUserPage(Page<User> page, User user); } ``` 在Service中，我们可以通过调用Mapper中的`selectPage`方法来执行分页查询： ```java @Service public class UserServiceImpl implements UserService { @Autowired private UserMapper userMapper; @Override public IPage<User> getUserPage(Page<User> page, User user) { return userMapper.selectUserPage(page, user); } } ``` 以上就是MyBatis-Plus分页插件的基本配置和使用方法。我们可以根据自己的需求进行配置和使用，以满足项目的实际需要。 ### 回答3： Mybatis-Plus是一款基于Mybatis的增强工具包，其提供了一些实用的插件，比如分页插件。这个分页插件功能强大、易用且功能齐全，是许多企业得心应手的利器。下面我们就具体讲一下Mybatis-Plus分页插件的配置方法。 1. 引入依赖 ```xml <dependency> <groupId>com.baomidou</groupId> <artifactId>mybatis-plus-boot-starter</artifactId> <version>3.3.2</version> </dependency> ``` 2. 配置分页插件 在Spring Boot的配置文件application.yml或application.properties中添加以下配置： ```yaml mybatis-plus: # 配置分页插件 configuration: # 数据库方言 db-config: id: db2 dialect: mysql db-type: mysql pageNumType: int pageSizeType: int global-config: db-config: id-type: auto page-helper: auto-dialect: false ``` - dialect：配置数据库方言，Mybatis-Plus提供了多种方言，如MySQL、Oracle、SQL Server等，分别对应的dialect为mysql、oracle、sqlserver等。 - id-type：配置ID的生成策略，Mybatis-Plus提供了多种策略，如自增主键、UUID、雪花算法等。 - auto-dialect：自动检测数据库方言，设置为false则需要手动配置dialect。 3. 使用分页插件 在查询方法中使用Page对象进行分页查询： ```java @Service public class UserServiceImpl extends ServiceImpl<UserMapper, User> implements UserService { @Autowired private UserMapper userMapper; public Page<User> getUserList(int pageNum, int pageSize) { Page<User> page = new Page<>(pageNum, pageSize); return userMapper.getUserList(page); } } ``` 注意：需要将Page对象作为参数传入查询方法中，并在查询方法中使用Page对象的相关方法进行分页查询。 4. 分页查询结果封装 使用分页插件后，查询结果会自动封装为带分页信息的Page对象，我们可以在对应的Controller中将查询结果返回给前端。 ```java @RestController @RequestMapping("/user") public class UserController { @Autowired private UserService userService; @GetMapping("/list") public R getUserList(@RequestParam("page") Integer pageNum, @RequestParam("limit") Integer pageSize) { Page<User> pageData = userService.getUserList(pageNum, pageSize); return R.ok().put("page", pageData); } } ``` 其中，R.ok()表示成功返回，put()方法中可以加入其它需要返回的参数。最后将查询结果封装到Page对象中返回给前端。 根据以上四个步骤，我们就可以成功地配置并使用Mybatis-Plus分页插件实现分页查询了。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值