Mybatis分页实践:PageHelper 和 pagination.js

简介: 先看下分页效果: mybatis分页插件用的这个 https://github.com/pagehelper/Mybatis-PageHelper jquery分页插件用的这个 https://github.com/gbirke/jquery_pagination 具体用法如下: 1、在相应页面引入pagination的css和js 2、页面合适位置引入 <

先看下分页效果:


mybatis分页插件用的这个

https://github.com/pagehelper/Mybatis-PageHelper

jquery分页插件用的这个

https://github.com/gbirke/jquery_pagination


具体用法如下:

1、在相应页面引入pagination的css和js

2、页面合适位置引入 <div class="paginations"></div>

3、代码实现

var userId = $('#userId').val();
var schoolId=$('#schoolId').val();
 
var friendId;
var isFirst=true;
var pageNum = 1;
var pageSize = 9;

$(function(){
		getSearchResult(pageNum,pageSize);
})
// 发送好友申请
$('#addFriendSent1').on('click',function() {
	var mark = $('#addFriendInfo').val();
	$.post('friendApply/sentAddFriendInfo', {"userId" : userId,	"friendId" : friendId,	"remark" : mark	}, function(result) {
		if(result>0){
			alert("发送成功!");
			self.location.reload();
		}else if(result==-1){
			 layer.msg("你们已经是好友了,请勿重复添加!");
		}else{
			 layer.msg("发送失败!");
			 self.location.reload();
		}
	})
	$('#addFriendInfo').html();
})

function getSearchResult(pageNum,pageSize){
	 $.post("friendController/searchFriend",{"searchStr" : "","userRole" : "student","provinceCode" : "","cityCode" : "","countyCode" : "",	"schoolId" : schoolId,
			"gradeCode" : "", "classId" : "","pageNum" : pageNum,"pageSize" : pageSize	},
		function(result) {
			var friendList = result.list;
			var total=result.total;
			$("#AddFriendListDiv").empty();
			if(total==null||total<1){
				$("#AddFriendListDiv").html('<div class="alert alert-info" role="alert">暂无相关内容</div>');
				$(".paginations").empty();
				return;
			}
			 $.each(result.list,function(k, v) {
					// console.log(v)
					var logo = "", gender = "男";
					if (v.userInfo.logo != null)
						logo = v.userInfo.logo;
					if (v.userInfo.sex != 1)
						gender = "女";
					var htm = '<li><a href="user/ucIndex?id='+v.userInfo.id+'" target="_blank"><img src="'+logo+'"/></a><div class="info">'
					+ '<div class="info-div">'+ v.userName+ '</div><div class="info-div info-gray">姓名:'
					+ v.userInfo.ucName	+ '</div>'
					+ '<div class="info-gray col-sm-8 info-num"><i class="glyphicon glyphicon-user"></i>'
					+ gender + '</div>'	+ '<div class="col-sm-4 info-contoler"><a href="javascript:;" name="' + v.userName
					+ '" class="addFriendInfoBTN" data-toggle="modal" data-target="#myModal-friend-info" >+ 好友</a></div></div></li>';
					$("#AddFriendListDiv").append(htm);
			  })
		 
			if(isFirst){
				initPagination(total);
				isFirst=false;
			}
			
		         $('.addFriendInfoBTN').on('click',function() {
				    var userName = $(this).attr("name");
					$.each(friendList,function(k,v) {
							if (v.userName == userName) {
								friendId = v.id;
								var logo = "", gender = "男";
								if (v.userInfo.logo != null)
									logo = v.userInfo.logo;
								if (v.userInfo.sex != 1)
									gender = "女";
								$("#friendInfo").html("");
								$("#friendInfo").append('<div class="pull-left group-des-img"><img src="'
									+ logo+ '" alt="" /></div><div class="pull-left group-des-info"><label>'
									+ v.userName + '</label><p>'+ v.userInfo.ucName
									+ '</p></div><p>性别:'+ gender+ '</p>');
							}
						})
				 })
		})
	
}

/**
* 初始化分页
*/
function initPagination(total) {
	$(".paginations").pagination(total, {
				prev_text : ' « ',
				next_text : ' » ',
				items_per_page : pageSize, // 内容数量
				num_display_entries : 5, // 中间页数
				num_edge_entries : 1,// 省略号两边页数
				is_show_skip_page : true,
				callback : pageslectCallback
			});
}

/**
* 分页处理
*/
function pageslectCallback(page_index, jq) {
	if(!isFirst){
		getSearchResult(page_index + 1, pageSize);
	}
	isFirst = false;
	return false;
}




目录
相关文章
|
2月前
|
存储 JavaScript 前端开发
使用JavaScript构建动态交互式网页:从基础到实践
【10月更文挑战第12天】使用JavaScript构建动态交互式网页:从基础到实践
118 1
|
2月前
|
JavaScript 前端开发 安全
TypeScript的优势与实践:提升JavaScript开发效率
【10月更文挑战第8天】TypeScript的优势与实践:提升JavaScript开发效率
|
2月前
|
JavaScript 前端开发 开发者
理解JavaScript中的原型链:基础与实践
【10月更文挑战第8天】理解JavaScript中的原型链:基础与实践
|
23天前
|
SQL Java 数据库连接
【MyBatisPlus·最新教程】包含多个改造案例,常用注解、条件构造器、代码生成、静态工具、类型处理器、分页插件、自动填充字段
MyBatis-Plus是一个MyBatis的增强工具,在 MyBatis 的基础上只做增强不做改变,为简化开发、提高效率而生。本文讲解了最新版MP的使用教程,包含多个改造案例,常用注解、条件构造器、代码生成、静态工具、类型处理器、分页插件、自动填充字段等核心功能。
【MyBatisPlus·最新教程】包含多个改造案例,常用注解、条件构造器、代码生成、静态工具、类型处理器、分页插件、自动填充字段
|
1月前
|
SQL 缓存 Java
【详细实用のMyBatis教程】获取参数值和结果的各种情况、自定义映射、动态SQL、多级缓存、逆向工程、分页插件
本文详细介绍了MyBatis的各种常见用法MyBatis多级缓存、逆向工程、分页插件 包括获取参数值和结果的各种情况、自定义映射resultMap、动态SQL
【详细实用のMyBatis教程】获取参数值和结果的各种情况、自定义映射、动态SQL、多级缓存、逆向工程、分页插件
|
2月前
|
SQL JSON Java
mybatis使用三:springboot整合mybatis,使用PageHelper 进行分页操作,并整合swagger2。使用正规的开发模式:定义统一的数据返回格式和请求模块
这篇文章介绍了如何在Spring Boot项目中整合MyBatis和PageHelper进行分页操作,并且集成Swagger2来生成API文档,同时定义了统一的数据返回格式和请求模块。
65 1
mybatis使用三:springboot整合mybatis,使用PageHelper 进行分页操作,并整合swagger2。使用正规的开发模式:定义统一的数据返回格式和请求模块
|
2月前
|
前端开发 JavaScript
深入理解JavaScript中的事件循环(Event Loop):从原理到实践
【10月更文挑战第12天】 深入理解JavaScript中的事件循环(Event Loop):从原理到实践
38 1
|
1月前
|
Web App开发 JavaScript 前端开发
构建高效后端服务:Node.js与Express框架的实践
【10月更文挑战第33天】在数字化时代的浪潮中,后端服务的效率和可靠性成为企业竞争的关键。本文将深入探讨如何利用Node.js和Express框架构建高效且易于维护的后端服务。通过实践案例和代码示例,我们将揭示这一组合如何简化开发流程、优化性能,并提升用户体验。无论你是初学者还是有经验的开发者,这篇文章都将为你提供宝贵的见解和实用技巧。
|
3月前
|
SQL Java 数据库连接
解决mybatis-plus 拦截器不生效--分页插件不生效
本文介绍了在使用 Mybatis-Plus 进行分页查询时遇到的问题及解决方法。依赖包包括 `mybatis-plus-boot-starter`、`mybatis-plus-extension` 等,并给出了正确的分页配置和代码示例。当分页功能失效时,需将 Mybatis-Plus 版本改为 3.5.5 并正确配置拦截器。
861 6
解决mybatis-plus 拦截器不生效--分页插件不生效
|
2月前
|
Web App开发 JavaScript API
构建高效后端系统:Node.js与Express框架的实践之路
【9月更文挑战第37天】在数字化时代的浪潮中,后端开发作为技术架构的核心,承载着数据处理和业务逻辑的重要职责。本文将深入探讨如何利用Node.js及其强大的Express框架来搭建一个高效、可扩展的后端系统。我们将从基础概念讲起,逐步引导读者理解并实践如何设计、开发和维护一个高性能的后端服务。通过实际代码示例和清晰的步骤说明,本文旨在为初学者和有经验的开发者提供一个全面的指南,帮助他们在后端开发的旅途上走得更远。
51 3