zl程序教程

您现在的位置是:首页 >  其他

当前栏目

Mybatis分页实践:PageHelper 和 pagination.js

2023-03-14 10:24:44 时间

先看下分页效果:


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;
}